CSS gradient generator

Make a CSS gradient with up to four color stops, in linear, radial or conic form, and copy the code as CSS or Tailwind v4 classes.

How to make a CSS gradient

  1. Choose linear, radial or conic with the Type buttons.
  2. Click a color stop to change its color. Use Add stop and Remove stop to work with two to four stops.
  3. For a linear gradient, set the rotation from 0 to 315 degrees in steps of 45. Press Random for a new idea.
  4. Switch the export between CSS and Tailwind v4, then press the copy button to take the code with you.

What you can do

  • Three gradient types

    Linear gradients along an angle, radial gradients from a center point, and conic gradients that sweep around a point.

  • OKLCH-interpolated CSS

    The CSS has an sRGB version every browser understands, followed by the same gradient interpolated in OKLCH, which keeps the middle as vivid as the ends in browsers that support it.

  • Tailwind v4 export

    Copy the gradient as Tailwind v4 utility classes instead of CSS.

  • Live preview

    The preview updates as you change colors, angle and type.

  • Start from the library

    Open any gradient from the gradient library in the maker with its stops and angle already loaded.

Frequently asked questions

How do I make a CSS gradient?

Choose a type, set two to four colors and, for a linear gradient, an angle. The generator writes the background declaration, and you copy it into your stylesheet.

What is the difference between linear, radial and conic gradients?

A linear gradient blends colors along a straight line at an angle. A radial gradient blends outward from a center point. A conic gradient sweeps the colors around a center point, like a color wheel or a pie chart.

Why does my gradient look gray or muddy in the middle?

Blending two saturated colors in sRGB can pass through a duller midpoint. Interpolating in OKLCH, which the CSS from this generator includes for browsers that support it, tends to keep the middle more vivid.

Can I use these gradients in Tailwind CSS?

Yes. Switch the export to Tailwind v4 and copy the classes.

How many color stops can I add?

From two to four. For a longer ramp of separate colors, use the gradient palette generator.