Advertisement
Guide
About the CSS Gradient Generator
CSS gradients let you paint smooth color transitions as backgrounds without any image files — which means they're resolution-independent, tiny in file size, and easy to tweak. This generator builds linear, radial, and conic gradients visually: click the bar to add colour stops, drag them into place, set opacity, angle and centre, and stack several layers into one background.
Copy the result as CSS (with a solid fallback colour), as Tailwind v4 or v3 classes, or as an animated gradient. Already have a gradient? Paste its CSS and edit it here. Everything runs in your browser.
Linear, radial, and conic — what each does
- Linear — colors blend along a straight line at an angle you choose. The most common type, great for backgrounds and buttons.
- Radial — colors radiate outward from a center point, useful for spotlights and soft glows.
- Conic — colors sweep around a center like a color wheel, handy for pie-chart effects and unique backgrounds.
Color stops and smooth blends
Each color in a gradient is a stop with a position. Adding more stops and adjusting their positions controls where colors sit and how sharp or gradual the blend is. Placing two stops at the same position creates a hard edge — tick Repeatingand you have stripes. Lowering a stop's opacity lets the layers beneath show through, which is how soft glows and mesh-like backgrounds are built.
Why gradients go grey in the middle — and the fix
By default browsers blend gradients in sRGB, which takes a straight line through the colour space. Between complementary colours such as blue and yellow, that line passes through grey, leaving a dull band. Setting Blend in to OKLab keeps the blend perceptually even, and OKLCH travels around the hue wheel so the middle stays vivid. This uses the in oklch syntax supported by all current browsers; the CSS output adds an sRGB fallback for older ones. Tailwind v4 blends in OKLab by default, so its output states the mode explicitly to match.
How to use it
- 1Pick a preset, paste existing CSS, or choose linear, radial or conic.
- 2Click the bar to add stops, drag them into place, and set each colour and opacity.
- 3Adjust the angle or centre, the blend mode, and add layers if you need them.
- 4Copy the CSS, Tailwind classes or animated version.
Frequently asked questions
What is the difference between linear, radial, and conic gradients?
Linear blends colors along a straight line, radial spreads them outward from a center, and conic sweeps them around a center point like a color wheel.
How do I control where colors appear?
Each color is a stop with a position from 0% to 100%. Move the stops to decide where each color sits and how gradual the transition is.
Can I make a hard-edged stripe instead of a blend?
Yes. Place two color stops at the same position so the colors meet with no blend, which produces a crisp edge. Tick Repeating to turn it into stripes — try the Stripes preset.
How do I get a Tailwind class for my gradient?
Choose the Tailwind v4 or v3 tab. Simple gradients become utilities such as bg-linear-to-r from-[…] to-[…]; anything Tailwind cannot express — more than three stops, several layers, repeating — becomes a single arbitrary bg-[…] value.
Can I edit a gradient I already have?
Yes. Open “Import existing CSS”, paste the background or background-image value (any CSS colours work, including rgba and named colours), and it becomes editable layers.
Do CSS gradients hurt performance?
No. They are drawn by the browser and use no image files, so they are lightweight and scale to any resolution.
Is the CSS generated locally?
Yes. The gradient and its CSS are produced entirely in your browser.