CSS Gradient Generator
Build linear, radial and conic gradients with unlimited colour stops, angle control and live preview. Copy CSS or Tailwind classes free.
Type
Color Stops
Stop 1
.gradient {
background: linear-gradient(135deg, #7c3aed 0%, #06b6d4 100%);
}About the css gradient generator
CSS gradients are generated images, not colours, which is why they belong in background-image rather than background-color. There are three kinds: linear runs along an angle, radial spreads from a point, and conic sweeps around one, which is what makes pie charts and colour wheels possible in plain CSS.
Adding a third colour stop is usually what separates a flat two-colour gradient from one that looks designed. This generator gives you unlimited stops with individual positions so you can control exactly where each colour lands.
How to use it
- 1Choose the gradient type. Linear suits most backgrounds and buttons.
- 2Set the angle. 135 degrees, running top-left to bottom-right, reads as natural light.
- 3Add colour stops and drag their positions to control where each colour sits.
- 4For a smoother blend, pick colours that are close in hue rather than opposites.
- 5Copy the CSS, or the Tailwind arbitrary value.
Worth knowing
- Gradients are background images, so they go in the background or background-image property.
- Two colours far apart on the colour wheel produce a grey band where they meet. Adding a mid stop in a related hue fixes it.
- You can layer multiple gradients in one declaration by separating them with commas.
Questions
Why does my gradient have an ugly grey band in the middle?
Because the two colours are on opposite sides of the colour wheel and the interpolation passes through grey. Add a third stop in a hue between them, or pick colours that are closer together.
How do I make a gradient that repeats?
Use repeating-linear-gradient or repeating-radial-gradient with stop positions in fixed units. That is how the stripe patterns in the pattern generator are built.
Can I animate a gradient?
Not the colour stops directly, since gradients are images. The usual trick is to make the background larger than the element and animate background-position, which gives a smooth moving effect.