CSS Gradient Generator
Build linear, radial and conic gradients visually and copy the CSS.
- Runs in your browser
- Nothing is uploaded
- Free, no sign-up
Gradients blended in OKLab avoid the grey, muddy middle that sRGB produces between some colour pairs, such as blue and yellow. The CSS includes a standard version first, so browsers without support fall back to it.
About this tool
Pick a type, set the direction and add colour stops, watching the gradient update as you go, then copy the CSS. It supports linear, radial and conic gradients, repeating patterns, and blending in OKLab for smoother results.
How to use it
- Choose linear, radial or conic, or start from a preset.
- Set the angle or centre, and edit, add or reposition the colour stops.
- Copy the CSS into your stylesheet.
The three kinds
Linear gradients run along a line. The angle sets the direction: 0deg goes bottom to top, 90deg goes left to right and 180deg goes top to bottom.
Radial gradients spread out from a point as a circle or an ellipse, and suit glows and spotlights. The centre can sit anywhere in the box.
Conic gradients sweep around a point like the hand of a clock. They are how you make pie charts, colour wheels and angular sheens with no images.
Why some gradients look muddy
By default browsers blend colours in sRGB, and between some pairs, blue and yellow for example, the middle passes through a flat grey. Blending in a perceptual space such as OKLab keeps the middle bright and the transition even.
The generator writes the plain version first and the in oklab version after it. Browsers that understand the newer syntax use the second; the rest ignore it and keep the first, so nothing breaks.
Hard stops and stripes
Two stops at the same position make a hard edge instead of a blend. Place a dark stop at 0% and 10%, then a light one at 10% and 20%, and mark the gradient repeating, and you have stripes with no image at all. The Stripes preset does exactly this.
Stops are written in order along the line whatever order you edited them in, and positions are kept between 0% and 100%.
Text on gradients
A gradient is cheap to render and scales to any size without blurring, which makes it better than a background image for most uses.
If text sits on top, the contrast has to hold across the whole gradient, and the worst point is the one that counts. Check the lightest and darkest parts against the text colour with the color contrast checker.
Frequently asked questions
Why are there two background-image lines?
When you pick a modern colour space, the first line is the standard sRGB version for older browsers, and the second overrides it where the newer syntax is supported.
Can I put a gradient on text or a border?
Yes, with CSS. Gradient text uses background-clip: text with a transparent text colour, and a gradient border uses border-image or a padded background layer. The gradient value itself is the same.
How many colour stops can I use?
As many as you like. Two make a simple fade; more give multi-colour bands or hard-edged stripes.
Is the CSS safe to use commercially?
Yes. A gradient is just CSS you generated, with no licence attached.
Related tools
Color Converter
Convert between HEX, RGB, HSL and check contrast ratios.
Color Contrast Checker
Check text and background colours against WCAG AA and AAA, and get fixes.
CSS & JS Minifier
Strip comments and whitespace from CSS and JavaScript.
Favicon Generator
Turn one image into every favicon size, plus the HTML.