CSS Gradient Generator
Linear, radial and conic CSS gradients with as many color stops as you need.
Linear gradient
3 stops · 135deg · blended in OKLAB
Color stops
CSS
Blended in OKLABbackground-image: linear-gradient(135deg in oklab, #2f6f68 0%, #f2b134 52%, #c05746 100%);background-image: linear-gradient(135deg, #2f6f68 0%, #577c66 9.09%, #7a8862 18.18%, #9a935b 27.27%, #bb9f52 36.36%, #dba944 45.45%, #efac36 54.55%, #e69b3d 63.64%, #dd8b41 72.73%, #d47a44 81.82%, #ca6945 90.91%, #c05746 100%);
Put the fallback first and the modern rule second. A browser that does not understand
in oklab discards the second declaration and keeps the sampled
one, which lands within a shade or two of the real thing.
Sampled ramp
Twelve steps, next to plain sRGB
OKLAB: what you are building
sRGB: the browser default, for comparison
Compare the middles. Where the sRGB row loses saturation and the row above does not, that is the dead zone you are avoiding by naming a perceptual color space.
In context
Hero, button and swatch
As a hero panel
Text sits on the first stop
Add as many color stops as you need, set their positions, and pick the color space the browser should blend through. Blending in OKLab or OKLCH is the fix for the muddy gray band that appears in the middle of most sRGB gradients between two saturated colors.
How to make a gradient background in CSS
A CSS gradient is an image the browser draws for you, so it goes in the background or background image property. Choose linear for a straight blend at an angle, radial for a blend that spreads out from a point, or conic for a sweep around a center, which is handy for pie charts and color wheels. Add a color stop for each hex code you want, then copy the finished CSS.
Why OKLCH gradients look cleaner
Browsers blend gradients in sRGB unless you say otherwise, and a straight line through sRGB between two saturated colors passes through gray. Blue to yellow is the classic example. Naming a perceptual color space such as OKLab or OKLCH keeps the colors vivid all the way across, and OKLCH can even travel around the hue wheel for a rainbow effect.
CSS that works in every browser
The generator gives you two lines of CSS. The first is a fallback made of extra color stops sampled along the perceptual path, so older browsers get a close match. The second is the modern version with the color space named. Browsers that understand it use it, and the rest keep the fallback.
How to use the gradient generator
- Set your color stopsAdd, remove and reposition color stops. Each one takes any CSS color, including transparent ones.
- Choose a typeLinear with an angle, radial with a shape and origin, or conic sweeping from a starting angle.
- Pick the blend spaceOKLab is the safe default. OKLCH travels around the hue wheel, which is what you want for rainbow style ramps.
- Copy the CSSYou get the modern single line version and a sampled sRGB fallback that reproduces it in older browsers.
Common questions
Why does my gradient have a gray band in the middle?
Because the browser is blending in sRGB by default, and the straight line between two saturated colors in sRGB passes through a desaturated middle. Blue to yellow is the classic offender. Blending in OKLab or OKLCH keeps the chroma up and removes the dead zone.
How do I make a gradient background with hex codes?
Enter each hex code as a color stop, set the angle or shape, and copy the CSS. The output is a background image declaration you can paste straight into your stylesheet, with the hex codes as stops.
What angle does 0deg mean in a CSS gradient?
0deg points to the top, and angles increase clockwise. So 90deg runs left to right, 180deg runs top to bottom, and 270deg runs right to left. This differs from the old WebKit prefixed syntax, which measured from the right and went counterclockwise.
How do I fade a gradient to transparent properly?
Fade to the same color with zero alpha, not to the keyword transparent. In some engines transparent resolves to rgba(0,0,0,0), so a gradient from red to transparent picks up a dirty gray cast on the way out. Use rgb(255 0 0 / 0) instead.
Are conic gradients well supported?
Yes, conic gradients are supported across all current major browsers. They are the simplest way to build pie charts, color wheels and progress rings in pure CSS with no images or SVG.
The rest of the toolkit
Every tool reads the same color formats, so you can carry a value straight from one to the next.