Gradient Generator
Design linear, radial or conic CSS gradients with color stops, angle and center, preview them live and copy the CSS, with optional OKLCH interpolation.
Presets
Settings
OKLab and OKLCH usually keep the middle colors vivid instead of gray. The CSS starts with an sRGB line for older browsers.
Color stops
Up and down swap colors; positions stay where they are. Use 2 to 10 stops.
- %
- %
- %
How to use
- Start from a preset, or choose a linear, radial or conic gradient under “Settings”.
- Adjust the angle, shape and center. For more vivid middle colors, set “Color interpolation” to OKLab or OKLCH.
- Edit each color and position under “Color stops”, and use “Add”, “Remove”, “Up” and “Down” to rearrange them, all from the keyboard.
- The preview updates instantly. Click “Copy” to grab the CSS for your stylesheet.
FAQ
What is the difference between linear, radial and conic?
A linear gradient changes along a straight line: 0° runs bottom to top and 90° left to right. A radial gradient spreads out from a center as a circle or ellipse. A conic gradient sweeps around the center, which suits pie charts and color wheels.
Why use OKLCH interpolation?
The default sRGB interpolation often passes through dull colors between complementary hues; blue to yellow turns gray in the middle. OKLab and OKLCH are perceptual, so the middle stays evenly light and vivid. OKLCH can also take the shorter or longer way around the hue wheel, for rainbow effects.
What about browsers without “in oklch” support?
With OKLab or OKLCH, the CSS starts with a plain sRGB declaration and then the new syntax. Browsers that do not understand the second line ignore it and use the first, so they still show a regular gradient.
Can stops share a position?
Yes. Two stops at the same position make a hard edge, and with “Repeating gradient” you get stripes. If a stop’s position is smaller than the one before it, CSS moves it up to that position; the tool warns you and “Sort by position” fixes it.
Can I use transparent colors?
Yes. Add two alpha digits to the HEX code: #ff880080 is a half-transparent orange. The preview shows transparency over a checkerboard.
Is my data uploaded?
No. Everything is calculated in your browser, with no network connection needed.