CSS gradient generator: build linear, radial & conic gradients

CSS gradients are one of the highest-impact, lowest-cost design touches you can add to a site: they're rendered by the browser, weigh nothing, scale to any screen, and never pixelate. This generator lets you build linear, radial, and conic gradients visually and copy clean code - so you skip the trial-and-error of hand-writing color stops and angles.

What this tool builds

How to create a CSS gradient

Gradient syntax cheatsheet

For the full specification, see MDN's CSS gradient reference.

CSS gradients vs image gradients

Keeping text readable on gradients

Frequently asked questions

What is a CSS gradient generator?

A visual editor for linear, radial, and conic gradients that outputs copy-ready CSS or Tailwind code.

Linear vs radial vs conic?

Linear blends along a line, radial blends outward from a center, conic sweeps around a center like a clock face.

How do I create a CSS gradient?

Pick a type, add color stops with positions, set an angle if needed, and copy the generated rule into your background property.

How do I add a gradient in Tailwind?

Use the built-in gradient utilities, or an arbitrary value like bg-[linear-gradient(...)] with underscores for spaces - which this tool outputs.

Can I use more than two colors?

Yes - add multiple stops and position each one. Two or three usually look cleanest.

CSS gradient or image?

CSS - it's weightless, scalable, and editable. Use images only for effects CSS can't produce.

How do I keep text readable?

Check contrast against the lightest and darkest points; aim for 4.5:1, and add an overlay if needed.

Is it free?

Yes - free, no signup, runs entirely in your browser.