ColorFlowTools

CSS Gradient Generator

Build smooth CSS gradients and copy production-ready code. Choose linear, radial, or conic, add as many color stops as you need, and drag or type each stop’s position. For linear and conic gradients you can set the angle, and any stop can include transparency for overlays and fades. The preview updates live and the generated CSS appears alongside it, using only valid, safe gradient syntax so you can paste it straight into a stylesheet. You can save favorite gradients in your browser and reuse them later. The generator never injects arbitrary properties or scripts into the output; it only combines allowed gradient values, so the code you copy is exactly what you see.

Color stops

CSS

 
   
  
   
   
 
 
How to use the CSS Gradient Generator
 
     
  1. Pick a gradient type. Choose linear, radial, or conic.
  2. Add and position stops. Add color stops, set each stop’s color and position, and adjust the angle for linear or conic.
  3. Copy the CSS. Preview the result live and copy the generated background property.
    4.  
 
 
 
Examples
 
     
  • Brand hero: A 135-degree linear gradient from #6c5ce7 to #00cec9 for a hero background.
  • Soft radial glow: A radial gradient from a translucent white center to transparent for a subtle highlight.
    •  
 
 
 
How it works
 
A CSS gradient interpolates between color stops across a direction (an angle for linear, a center for radial, or a rotation for conic). Stop positions control where each color sits, and transparency lets gradients fade. The generator assembles these into standard syntax such as linear-gradient(135deg, #6c5ce7 0%, #00cec9 100%).
 
 
 
Common use cases
 
     
  • Designing hero and section backgrounds
  • Creating subtle button and card gradients
  • Prototyping conic gradients for badges and loaders
    •  
 
 
 
Privacy
 

All color calculations run in your browser. Nothing you enter is sent to
          a server. Saved palettes and recent colors are kept only in your
          browser’s local storage and can be cleared at any time.

 
  
 
Frequently asked questions
 
 Can I use more than two colors? 
Yes. Add as many color stops as you like and position each one along the gradient.
 
 How do I fade to transparent? 
Give a color stop an alpha value below 1, or add a fully transparent stop at the end.
 
 Is the generated CSS safe to use? 
Yes. The generator only combines valid gradient values and never injects arbitrary properties or scripts.
 
 Can I save gradients? 
Yes. Save favorites in your browser and load them again later.
 
 
 
  
  Color Palette Generator Generate color schemes with lock, reorder, and export to CSS, JSON, SVG, and PNG.  Color Mixer Mix two colors at any ratio, with intermediate steps and a gradient view.  Color Picker Pick a color and read its HEX, RGB, HSL, HSV, and CMYK values with alpha support.  Color Format Converter Auto-detect any color input and convert it to HEX, RGB, HSL, HSV, HWB, and CMYK.  Tint and Shade Generator Generate tints and shades of a color as a scale, with WCAG text hints and export.