CSS Gradient Generator
What this tool does
Pick a gradient type (Linear, Radial, or Conic), adjust the angle or shape, add color stops and drag their positions, then copy the ready-to-use CSS. The preview updates live so you see the result as you edit. Click any preset swatch to apply it as a starting point.
How to use
- Choose a gradient type: Linear, Radial, or Conic.
- Adjust the angle (for Linear/Conic) or shape (for Radial).
- Click a color swatch to change colors, or type a HEX value.
- Drag position sliders to control where each color falls.
- Click Copy to copy the CSS code.
Frequently Asked Questions
What is a linear gradient?
A linear gradient transitions colors along a straight line at a given angle. Use `linear-gradient(135deg, #color1, #color2)` in CSS. The angle controls the direction — 0° is bottom-to-top, 90° is left-to-right, 135° is diagonal.
What is a radial gradient?
A radial gradient radiates colors outward from a center point in a circle or ellipse shape. Use `radial-gradient(circle, #color1, #color2)` in CSS. It's commonly used for spotlight and glow effects.
What is a conic gradient?
A conic gradient transitions colors around a central point, like a color wheel. Use `conic-gradient(from 0deg, #color1, #color2)` in CSS. It's useful for pie charts and spinner effects.
How many color stops can I add?
This generator supports up to 8 color stops. Each stop has a color and a position (0–100%). Drag the position slider to adjust where each color begins in the gradient.
Do CSS gradients work in all browsers?
Yes. Linear, radial, and conic gradients are supported in all modern browsers. The generator outputs a fallback background-color (the first stop) for very old browsers that do not support gradients.