CSS Gradient Generator

Design linear, radial, conic and mesh gradients, then export them as CSS, Tailwind, SVG or PNG.

Loading Gradient Maker…

How to use Gradient Maker

Pick linear, radial, conic or mesh, or start from a preset.
Click the ramp to add a color stop, and drag a handle to move it.
If the middle looks muddy or the blend feels uneven, open Effects and change Interpolate or Easing.
Copy the code as CSS, Tailwind, SVG, SwiftUI or Flutter, or download a PNG.

About Gradient Maker

Design CSS gradients visually. Drag the handles on the ramp to move a color stop, click the ramp to add one, set each stop's opacity, and copy the ready-to-use CSS background value as you go. Linear, radial, conic and repeating gradients are all supported, plus a mesh mode that stacks soft radial blobs into one background.

Already have a gradient? Paste it into Import and it loads straight back into the stops, so you can edit the one that is already in your stylesheet instead of rebuilding it. Effects switches the interpolation space (OKLCH keeps a two-color ramp from sagging through gray in the middle) and bends the fade with an easing curve, baking the result into plain sRGB stops that work everywhere. Export writes the same gradient as CSS, Tailwind, SCSS, SVG, SwiftUI, Flutter or Android XML, or downloads it as a PNG, JPG or SVG at any size. Contrast sweeps the whole ramp against your text color and reports the worst reading it finds.

What people use it for

Create a CSS linear, radial, conic or repeating gradient for a background.
Edit a gradient that is already in your stylesheet by pasting it back in.
Fade a gradient to transparent for an image overlay.
Fix a muddy two-color gradient by interpolating in OKLCH.
Export the same gradient to Tailwind, SVG, SwiftUI, Flutter or Android.
Render a gradient PNG for an OG image or a slide background.
Check whether text stays readable across the whole ramp.

Frequently asked questions

Which gradient types are supported?

Linear, radial (circle or ellipse, positionable), conic, the repeating variant of each, and a mesh mode that layers soft radial blobs.

Can I edit an existing gradient?

Yes. Paste any linear/radial/conic-gradient(...) value into Import and it loads back into the stops, including hex, rgb(), hsl() and named colors, `to right` keywords and auto-spaced stops.

What does OKLCH interpolation do?

It blends in a perceptual color space, so a ramp between two colors keeps its chroma instead of passing through a dull gray band in the middle. If you need older browser support, bake it down to plain sRGB stops in one click.

Can stops be transparent?

Yes, every stop has its own opacity, and the output switches to rgba() automatically. Fading to a transparent version of the same color avoids the gray cast you get from fading to `transparent`.

Does it output anything besides CSS?

Tailwind arbitrary values, an SCSS variable, SVG markup, SwiftUI, Flutter and Android XML, plus PNG, JPG and SVG downloads at any size up to 4096px, and ready-made snippets for gradient text, gradient borders and animated gradients.

Is text readable on my gradient?

The Contrast panel measures your text color against every point along the ramp and reports the lowest ratio with its WCAG AA/AAA verdicts.

Is it private?

Every calculation happens on this page, in your own browser. Your input is never sent to a server and never logged, which also means the tool keeps working when you are offline.