ع

CSS Gradient Generator

Linear, radial and conic gradients with multiple stops and CSS export.


  



    
  

    

    

      
About the CSS Gradient Generator
Design CSS gradients visually: add and remove color stops, set positions and angles, switch between linear, radial and conic types and copy production-ready CSS.
      
How to use it
  1. Choose linear, radial or conic.
  2. Adjust the angle or shape.
  3. Add stops, then edit each stop's color and position.
  4. Copy the CSS code or download it.
      
Examples
  • A subtle hero background from two near colors.
  • A conic color wheel for a loading indicator.
      
Frequently asked questions
Which browsers support these gradients?
Linear and radial gradients work in all modern browsers; conic gradients are supported by all current major browsers.
Can I use more than two colors?
Yes, add as many stops as you like.
Why does my gradient look banded?
Long gradients between similar dark colors can show banding on 8-bit displays; adding a mid stop or slight noise helps.
      
Related tools
CSS Variables GeneratorGenerate CSS custom properties from your colors, with optional shade scales.Color MixerMix two colors with adjustable ratios and different interpolation methods.Color Palette GeneratorGenerate harmonious palettes, lock colors you like and export them.