Generate CSS gradient

Create a CSS linear, radial, or conic gradient from colors and stops.

freeworks offlinenothing uploaded

ToolCSS Gradient Generator

Input

Output

—

Put this on your own site

The frame below runs the same code as this page, in the reader's own browser. Nothing is sent to us, and nothing is sent to you.

AccentBackground

Pick a dark background and the text and panels follow it, so the frame stays readable on a dark page.

How it works

Color stops and optional angle or shape become gradient function syntax; omitted positions are interpolated by CSS Images rules. The result is a background image rather than a flat color.

Evenly spaced linear stops are a readable default.
Explicit positions support hard transitions and multi-stop ramps.

Worked example

Sunset gradient background

Generate a warm 3-color linear gradient from left to right

Input

											Type: linear
Direction: to right
Colors: #ff6b6b, #feca57, #48dbfb
Repeating: false

Output

												/* Gradient */
.gradient {
  background: #ff6b6b;  /* Fallback */
  background: linear-gradient(to right, #ff6b6b, #feca57, #48dbfb);
  background: -webkit-linear-gradient(to right, #ff6b6b, #feca57, #48dbfb);
}

When to use this

Hero backgrounds, button states, and visualizations generate gradients.

Edge cases

Out-of-order stops are adjusted by browser interpolation.
Equal stop positions create a hard edge.
Transparent black differs from transparent colored paint during interpolation.

References

CSS Images gradients