CSS Gradient Generator
Design a background gradient visually and copy ready-to-use CSS. Drag the color stops along the bar, click the bar to add a stop, change the angle or the center, and make colors transparent. The code includes a solid fallback color for old browsers.
How to use it
- Choose linear, radial or conic, or start from a preset or a random gradient.
- Click a stop to edit its color, opacity and position; drag it, or click the bar to add another.
- Copy the CSS and paste it into the rule of the element.
Frequently asked questions
What is the difference between linear, radial and conic gradients?
A linear gradient changes color along a straight line at the angle you choose. A radial gradient spreads out from a center in a circle or ellipse. A conic gradient turns around a center, like the hands of a clock, which is useful for color wheels and pie charts.
Do CSS gradients work in all browsers?
Yes. Linear, radial and conic gradients work in all current versions of Chrome, Edge, Firefox and Safari without prefixes. The first background line is a plain color, used only by very old browsers.
How do I make stripes?
Put two stops of the same color at the start and the end of each stripe, so the color changes abruptly instead of blending, and turn on Repeat. The last preset is an example.
🏷️ Meta Tag Generator
🖼️ Open Graph Generator
🔗 UTM Builder
🔲 CSS Box Shadow Generator