CSS gradient generator
Choose a gradient type, change the colors and their positions — the background updates instantly and ready-made CSS for background appears below.
.element {
background: #2563eb;
background: linear-gradient(90deg, #2563eb 0%, #7c3aed 100%);
}How to use it
- Pick a type:
linear(along a line),radial(circles from the center) orconic(rotating around the center). - Set the angle or position: for linear,
90degruns left to right and180degruns top to bottom. - Edit the color stops: each one has a color and a position in percent. Use “+ Add” for up to 6 stops.
- Click “Copy” and paste the code into your stylesheet.
How it works
A gradient is an image, not a color
In CSS a gradient is an <image>, so it goes into background or background-image, not background-color. The generator also writes a plain color first as a fallback in case the gradient is not rendered.
Angle and direction
linear-gradient(90deg, …) runs from left to right. Instead of an angle you can use keywords: to right, to bottom right. 0deg points up, 180deg points down.
background: linear-gradient(to right, #2563eb, #7c3aed);Color stops
Each color can be followed by a position: #f00 0%, #00f 100%. When two stops share the same position the transition becomes a hard edge — that is how stripes are drawn.
background: linear-gradient(90deg, #2563eb 50%, #7c3aed 50%);radial and conic
radial-gradient(circle at center, …) spreads from the center outward, while conic-gradient(from 0deg, …) sweeps around the center — handy for pie charts and color wheels. The repeating- prefix repeats the pattern.
FAQ
How do I make gradient text?
Set the gradient as background, then add background-clip: text and color: transparent — the text is painted with the gradient.
Why doesn't background-color: linear-gradient(...) work?
Because a gradient is an image, not a color. Use background or background-image.
Can a gradient be animated?
Not directly. The usual tricks are animating background-position on an enlarged background-size, or registering a color custom property with @property.
Is it supported in browsers?
linear-gradient and radial-gradient work in every modern browser, and conic-gradient has been supported by all major browsers since 2020. Vendor prefixes (-webkit-) are no longer needed.
