Home › Tools › CSS Gradient Generator

CSS Gradient Generator

Design linear, radial and conic CSS gradients with any number of colour stops. See a live preview and copy a single CSS line to paste into your stylesheet.

Last updated: 11 Nov 2026 Read time: 4 min Category: Developer
Ad placement (top)
135

Colour stops


            
          

        

      


      
    


    

      
What Is a CSS Gradient

      
A CSS gradient is a smooth transition between two or more colours that the browser renders as an image on the fly. No file to download, no pixels to serve, and perfect scaling at any viewport size. The syntax lives inside the usual background property, so anywhere you could place an image you can place a gradient instead. Hero sections, cards, buttons, text clipping, borders and decorative shapes all benefit.


      
How to Use This Tool

      
    
        
  1. Pick the gradient type: linear flows in a direction, radial spreads from a point, conic sweeps around a point like a pie chart.
    2. 
        
  2. Add colour stops. Each stop has a colour and a position on the gradient line.
    3. 
        
  3. Adjust the angle for linear and conic gradients.
    4. 
        
  4. Copy the generated CSS from the dark box into your stylesheet. You can paste it into any background or background-image property.
    5. 
      


      
Linear vs Radial vs Conic

      
    
        
  • Linear: colours flow in a straight line. Angle 0deg is bottom to top, 90deg is left to right, 180deg top to bottom.
    • 
        
  • Radial: colours spread outward from a point. Great for soft spotlight effects and button highlights.
    • 
        
  • Conic: colours sweep around a point. The go-to choice for circular progress rings and pie charts in pure CSS.
    • 
      


      
Accessibility

      
Text overlaid on a gradient must still meet WCAG contrast. The tricky bit is that the contrast against the two ends of the gradient can differ. Check against the lightest and darkest pixel. If the contrast fails on one end, add a semi-transparent overlay or constrain the text to the high-contrast side.


      
Performance

      
Gradients are cheap. Modern browsers rasterise them with the GPU once per paint, then reuse the result. The only time to worry is when a gradient has many stops and animates every frame. In that case consider baking the gradient to an image or reducing the number of stops.


      
Privacy

      
No colours or styles are uploaded. The CSS is generated in your browser.


      
Frequently Asked Questions

      
What is a CSS gradient?

      
A browser-generated colour transition used as a background.

      
What are colour stops?

      
Points along the gradient where a specific colour is at full strength.

      
Linear vs radial?

      
Linear fades in a line, radial fades from a point.

      
Are gradients accessible?

      
Yes if text contrast meets WCAG against both ends.

      
Browser support?

      
Universal for linear and radial. Conic needs a modern browser.

      
Offline?

      
Yes.