UtilSlateSearch toolsCtrl K

CSS Gradient Generator

Design CSS gradients and copy the code.

Click the bar to add a color. Drag a handle to move it.

Type
Selected color

CSS

Presets

Runs on your device. Nothing to upload.

Questions

How do I add or move colors?

Click the color bar to add a stop there, drag a stop to move it, and use the fields below to change its color, opacity or exact position. With the keyboard, focus a stop and use the arrow keys (Shift for bigger steps); Delete removes it.

What does “Smoother blend (OKLCH)” do?

Browsers normally mix colors in sRGB, which can make the middle of a gradient between two saturated colors look grey or muddy. Mixing in OKLCH keeps it vivid. The CSS includes a plain version first, so older browsers still show a gradient.

Why is there a solid color in the CSS?

It’s a fallback: the average of your colors, shown by very old browsers and while nothing else has loaded. Modern browsers use the gradient line below it.

Can I edit a gradient I already have?

Yes: paste its CSS (the whole background line or just the linear-gradient(…)) into “Paste CSS” and press Load.

Is it free? Do I need an account?

It is free to use and there is nothing to sign up for. There are no watermarks and no daily limits.

Missing something, or not working as it should? Tell us