CSS Gradient Generator

This tool lets you build a gradient while watching its colors and direction in a preview, then copy the finished background declaration. It opens with the “Sunset” preset, whose CSS is background: linear-gradient(90deg, #ff7e5f 0%, #feb47b 100%);.

How to use it

1. Presets: click one of the five, Sunset, Ocean, Candy, Monochrome or Aurora, as a starting point.
2. Type: choose “Linear”, “Radial” or “Conic”. The options underneath depend on the type.
3. Color stops: set the colors and their positions. The next section covers the controls in detail.
4. Interpolate in OKLCH (in oklch): when on, the colors are joined through the OKLCH color space.
5. CSS: shows the declaration for the current settings. “Copy CSS” copies it.

Set the angle by typing in the number field or by moving the slider between 0 and 360. The number field also accepts values above 360 and negative values, and they go into the CSS as entered. Center position offers nine choices: the center, the four sides and the four corners.

Working with stops

A color stop is a point that says “this color at this position”, and the gradient is made by joining the stops. You can have from 2 to 8.

• Click an empty spot on the Gradient bar and a stop appears there. It takes the color that was already showing at that spot, so the gradient looks the same right after you add it. Drag it or change its color from there.
• The “Add stop” button inserts a white (#ffffff) stop halfway between the last stop and 100%. If the last stop is already at 100%, the new one goes in the middle of the widest gap between stops so that it doesn’t land on top of it. With one stop at 0% and one at 100%, it appears at 50%.
• Drag a handle, or type a number into the position field in the list, to change a position. On the keyboard, the arrow keys move a focused handle by 1%, or by 10% with Shift held, and Delete removes it.
• The Move up and Move down buttons in the list swap a stop’s position with its neighbor’s. Use them to reverse the order of colors.
• Remove is available only when there are 3 or more stops.

The list is always shown sorted by position, and the stops go into the CSS in that order too. Positions are written to one decimal place.

Accepted color inputs: Stop colors are read as HEX (3, 4, 6 or 8 digits), color names, rgb(), hsl(), oklch() and transparent. The hwb(), lab(), lch() and color() functions and variables written with var() are not read. A color that can’t be read gets the message “This isn’t a CSS color this tool can read.”, and that stop is left out of the preview and the CSS. Colors that are read go into the CSS exactly as you typed them.

Interpolating in OKLCH changes the colors in between

Unless told otherwise, a CSS gradient whose stops are all written as HEX, color names, rgb() or hsl() works in the sRGB color space and blends the red, green and blue values of two colors in a straight line, each on its own. Those numbers aren’t proportional to the brightness people perceive, so blending two colors that sit far apart on the color wheel makes the middle dark and dull. OKLCH handles lightness (L), chroma (C) and hue angle (H) separately and carries each one across, so lightness and chroma don’t sag in the middle.

Here is the color at the 50% point of the bar, calculated with two stops at 0% and 100%.

The further apart the hues, the bigger the difference, and with similar colors like the Sunset preset there is next to none. Keep in mind, too, that blending in OKLCH brings hues into the middle that neither color has. The orange and yellow that pass between red and green are an example. If you want the two colors to blend straight into each other, leave the option off.

Why the copied CSS has two lines

Syntax that names an interpolation method, such as in oklch, came to CSS fairly late, and some browsers don’t understand it. That is why turning OKLCH interpolation on gives you two declarations. For a linear gradient from red to green they look like this.

background: linear-gradient(90deg, #ff0000 0%, #ff3300 12.5%, #ff5600 25%, #ff7600 37.5%, #f99500 50%, #e3b200 62.5%, #c2ce00 75%, #8fe800 87.5%, #00ff00 100%);
background: linear-gradient(90deg in oklch, #ff0000 0%, #00ff00 100%);

• The first line is the fallback. The gap between each pair of neighboring stops is divided into 8 equal steps, and the 7 in-between colors, calculated in OKLCH, are inserted as ordinary HEX stops. Two stops become 9, and three become 17.
• The second line is the in oklch syntax itself.

When a property is declared twice the later one applies, so a browser that knows in oklch uses the second line, and one that doesn’t ignores the second line and uses the first.

While OKLCH interpolation is on, the preview and the gradient bar on this page are drawn the first-line way in every browser. The fallback line is an approximation, with its in-between colors written as HEX within the sRGB range, so it can differ slightly from what a browser draws from the second line directly. If the exact colors matter, check the result in your target browsers after pasting.

What this tool can’t make

• Repeating gradients such as repeating-linear-gradient. You have to add repeating- in front of the function name in the copied CSS and adjust the stop range by hand.
• A size for radial gradients (closest-side and the like), or a center position given as coordinates such as at 30% 70%
• Backgrounds that layer several gradients separated by commas
• Stop positions in px instead of percentages
• Other interpolation methods such as in hsl or in oklab