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.
Where you put the stops matters as much as which colours they are. Two stops at 0 and 100 percent spread the blend across the whole element; pulling them inward to, say, 30 and 70 holds each colour flat at the ends and concentrates the transition in the middle, which is how a gradient can feel deliberate rather than like a default fade.
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.
- Put two stops at the same position to get a hard line instead of a blend. That is the trick behind two-tone backgrounds and CSS stripes: no transition, just one colour ending exactly where the next begins.
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.
What is the difference between background and background-image for a gradient?
A gradient is an image, so it belongs in background-image. The background shorthand works too and is common, but setting background-color to a gradient does nothing, which is a frequent source of confusion.