Skip to content
Musterli

CSS Gradient

Linear, radial and conic gradients with smooth OKLCH transitions. Export as CSS, SVG or image.

Open the generator

Runs right in your browser. Your graphics are made on your device.

Example motif made with the CSS Gradient

Start from a preset

Pick a preset and it opens right in the editor, ready to adjust.

What is it?

A CSS gradient is a color transition the browser draws itself. It needs no image file, loads instantly and stays sharp at any size. This generator mixes colors in the OKLCH color space, so transitions look even and avoid a muddy gray middle.

How it works

Choose linear, radial or conic, set your colors and adjust angle, center and easing. Press Space for new variations. When you are happy, copy the CSS or the Tailwind classes, or export as SVG, PNG, JPG or WebP.

Try the CSS Gradient now

FAQ

Why OKLCH instead of sRGB?
In sRGB many color pairs pass through a dull, gray middle. OKLCH blends by perceived lightness and chroma, so transitions stay vivid. For older browsers the CSS also contains an sRGB gradient as a fallback.
What do the extra stops do?
They add intermediate colors along the transition, so the gradient follows the chosen easing curve, such as ease in and out, instead of running linearly.
Can I use the gradient with Tailwind?
Yes. Next to the CSS, the export offers ready-made Tailwind classes you can paste straight into your markup.
Does the exported image match the preview?
Yes. For SVG and images the same gradient is drawn as a vector graphic, at the size you choose in the export dialog.

Ready-made gradients

More than 30 original gradients with CSS to copy, each one ready to adjust in the editor.

Browse the gradient collection

Related generators

All generators in Gradients