CSS Gradient Generator
Design linear, radial and conic CSS gradients with editable color stops, angle dial, repeating modes and instant CSS output.
Controls
Live preview
Generated code
/* Your CSS will appear here */CSS Gradient Generator: how it works
Select Linear, Radial or Conic, move the color stops, and adjust the direction or center point. Toggle Repeating for pattern effects. The generator updates the preview and CSS output immediately, so you can test different choices before committing them to your project.
Popular ways to use this CSS generator
- Build vibrant website hero backgrounds with linear gradients.
- Add radial highlights to cards and decorative backgrounds.
- Create conic gradients for color wheels, charts and loading accents.
For more ideas, try the related tools below. All controls work right in your browser, and the generated code can be included in your own stylesheet.
About gradient CSS.
What is the difference between linear and radial gradients?
Linear gradients blend colors along a direction; radial gradients spread from a central point.
What is a conic gradient?
A conic gradient blends colors as they rotate around a center point, useful for rings and angular color effects.
Can I add more than two colors?
Yes. Add color stops and move their percentages to control each transition.
What is the difference between linear, radial and conic gradients?
A linear gradient blends colors along a line, a radial gradient radiates from a center, and a conic gradient transitions colors around a center point.
How do I make a gradient at a specific angle?
Select a linear gradient and adjust its angle. In CSS, 0deg points upward and 90deg points to the right.
Can a CSS gradient have more than two colors?
Yes. Add multiple color stops and control their positions to create smooth or intentionally sharp transitions.
How do I use the generated gradient as a background?
Copy the background or background-image CSS declaration and apply it to a selector. Gradients are CSS images, not background-color values.