Drag a stop, or select it and use the arrow keys (Shift for 10%).
OKLab blends through colors of even brightness; sRGB, the CSS default, can dip to grey between complementary colors.
background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%); background: linear-gradient(in oklab 90deg, #6366f1 0%, #ec4899 100%);
Build a CSS gradient by dragging color stops, then copy the CSS.
What it makes
A CSS gradient is an image the browser draws from a list of colors, so it costs no download and stays sharp at any size. This tool builds the three kinds CSS has. A linear gradient runs along a straight line at the angle you set, where 90° goes left to right and 180° top to bottom. A radial gradient spreads out from a center point as a circle or an ellipse. A conic gradient sweeps around a center point like the hands of a clock, starting at the angle you set, which is how color wheels and pie charts are drawn.
Each color stop is a color and a position along the gradient, from 0% to 100%. Drag a stop along the bar under the preview, or select it and type its color and position. Add a stop and it lands in the middle of the widest gap, in the color halfway between its neighbors, so the gradient barely changes until you move it. A gradient keeps between two and ten stops.
OKLab or sRGB
Between two stops the browser has to invent the colors in the middle, and the color space it
blends in decides what they look like. CSS blends in sRGB unless told otherwise, which mixes the red,
green and blue numbers directly. Between colors far apart on the color wheel, such as blue and
yellow, that passes through a dull grey band. OKLab is a color space designed so that equal steps
look equally different, and blending in it keeps the middle of the gradient as bright and saturated
as its ends. Choose OKLab and the CSS says in oklab, part of CSS Color Level 4.
A browser too old to know in oklab throws away the whole declaration it appears in. So
the copied CSS gives the sRGB version first and the OKLab version second, on two background lines. A current browser uses the second, and an old one keeps the first.
Sharing a gradient
Everything about the gradient, its type, angle, center, interpolation and stops, is kept in the
page's address after the #, so Copy link gives a link that opens this exact
gradient. The part after the # is never sent to a server, and the tool runs entirely in your
browser, including offline once the page has loaded.
How do I use the CSS on my page?
Paste the copied lines into the rule for the element you want to fill, for example a hero section or a button. It sets the background property; set a height on the element if it has no content of its own, or the gradient has no area to fill.
What angle goes top to bottom?
180°. In CSS, 0° points up, and angles turn clockwise: 90° is to the right, 180° is down and 270° is to the left. The default here, 90°, runs left to right.
Why does my gradient look grey in the middle?
Blending two colors that sit far apart on the color wheel in sRGB, the CSS default, passes through a desaturated band. Switch the interpolation to OKLab and the middle keeps its brightness and color.
Do all browsers support in oklab?
Current Chrome, Edge, Safari and Firefox do. For older ones the copied CSS repeats the gradient without it on the line before, so they still show a gradient, blended in sRGB.
Can I make a hard edge between two colors?
Yes. Put two stops at the same position with different colors, and the gradient switches from one to the other with no blend. That is how stripes are made.