Gradient Generator

Design linear, radial, and conic gradients and export CSS or an image

Files never leave your device
Runs in your browser
Free, no sign-up, no watermark

Color stops

Click the bar to add a stop. Drag handles to move them; arrow keys nudge, Delete removes.

Code

background: linear-gradient(135deg, #4f46e5 0%, #5d45e5 3.13%, #6a44e5 6.25%, #7643e3 9.38%, #8243e1 12.5%, #8d42de 15.63%, #9742db 18.75%, #a141d6 21.88%, #ab41d1 25%, #b541cc 28.13%, #be42c6 31.25%, #c642bf 34.38%, #cf42b8 37.5%, #d743b1 40.63%, #de44a9 43.75%, #e546a1 46.88%, #ec4899 50%, #f14b90 53.13%, #f54e87 56.25%, #f8527e 59.38%, #fb5775 62.5%, #fe5b6c 65.63%, #ff6063 68.75%, #ff665a 71.88%, #ff6c51 75%, #ff7247 78.13%, #ff783e 81.25%, #ff7e35 84.38%, #ff842b 87.5%, #fd8b21 90.63%, #fb9118 93.75%, #f89810 96.88%, #f59e0b 100%);
background: linear-gradient(in oklch 135deg, #4f46e5 0%, #ec4899 50%, #f59e0b 100%);

The first line is a fallback with precomputed stops for browsers without “in oklab/oklch” support.

How to use Gradient Generator

Build linear, radial and conic gradients with as many color stops as you like, blended in sRGB, OKLab or OKLCH. Copy the result as CSS, a Tailwind class or SVG, or download it as a PNG, JPG or WebP image up to 8192 px per side.

Choose a Type (Linear, Radial or Conic) and set the Angle, the Shape or the center; for radial and conic you can drag on the preview to move the center.

Edit the Color stops: click the bar to add a stop, drag handles to move them, and change each color and position in the list.

Pick how to Blend colors in (sRGB, OKLab or OKLCH), or start from one of the Presets or Random.

Copy the code from the CSS, Tailwind or SVG tab.

For an image, set Width and Height or pick a size, choose PNG, JPG or WebP, and click Download.

Frequently asked questions

What is the difference between sRGB, OKLab and OKLCH blending?

sRGB is classic CSS blending, where complementary colors can turn grey in the middle. OKLab is perceptually even, with no muddy midpoints. OKLCH keeps colors vivid by moving around the hue wheel.

Do OKLab and OKLCH gradients work in older browsers?

The CSS output starts with a fallback line that uses precomputed stops for browsers without “in oklab” or “in oklch” support. The SVG code and downloaded images use precomputed stops too, so they look the same everywhere.

Why is the SVG tab disabled for conic gradients?

SVG has no conic gradient. Download a PNG, JPG or WebP image instead.

Can I use transparent stops?

Yes, colors with alpha such as rgba() or #rrggbbaa work. Download PNG or WebP to keep the transparency, since JPG has no alpha channel.

Is the image made on a server?

No. The image is drawn on a canvas in your browser and saved directly, at any size from 1 to 8192 px per side.

How do I fine-tune a stop with the keyboard?

Focus a stop handle and use the arrow keys to move it by 1% (Shift for 10%), Home or End to jump to the ends, and Delete to remove it. A gradient always keeps at least two stops.