CSS Gradient Generator

Build a gradient

1. Choose Linear and an angle, or Radial with a shape, extent and center.
2. Edit each color, opacity and position. Keep positions in order; equal positions create a sharp transition. Add or duplicate a stop when you need another color.
3. Inspect the preview and the CSS, then copy the declaration or download gradient.css. Change the preview backing to see transparency more clearly.

Understand the controls

A linear angle of 0 degrees points up and 90 degrees points right. The same angle can look different in a wide box and a square box.

A radial gradient expands around its center. Circle or ellipse and the selected extent determine where the 100 percent stop lies.

Opacity is separate from the RGB color. The code keeps the percentage you enter and explicitly selects sRGB interpolation; a transparent stop does not paint the preview backing into the CSS.

Enter percentages with a dot or comma and at most one decimal place. Positions must equal or follow the previous row. This editor uses 2–8 stops, not every feature accepted by CSS.

Useful starting points

For a left-to-right background, choose Linear at 90 degrees and keep the red stop at 0 percent and blue stop at 100 percent.

For a sharp dividing line, use two differently colored stops at the same position. Their row order determines the change at that point.

For a faded radial background, choose a circle, give the outer color 0 percent opacity and inspect it over both light and dark backings. The backing itself is not exported.

Know the preview limits

This generator creates one linear or radial gradient in sRGB. It does not import arbitrary CSS or produce conic, repeating, mesh, image or animated backgrounds.

A browser that cannot parse the explicit interpolation syntax may still let you copy the code, but cannot show this preview. No alternate gradient is silently substituted.

Box dimensions, backing, browser rendering and display color handling affect appearance. This is not a guarantee of identical pixels, a contrast test or print-color calibration.

Some radial centers and closest extents produce a degenerate result rather than a smooth fade. Invalid active inputs clear the current result instead of leaving older CSS available.

Your gradient stays in the page

Gradient editing and code generation run in the page without uploading your values. This tool does not save your drafts. Copy and download happen only when you choose them; the site's general privacy policy still applies.