← utilities

CSS Gradient Generator

Linear or radial CSS from two or three hex stops. Copies a background-image string, not a single colour.

Type
Colour stops
Angle
deg
Position
CSS

100% Client-Side Processing

What CSS Gradient Generator is

A CSS linear or radial gradient from two or three hex stops. Live swatch and a background-image line you can copy.

How to use it

  1. Pick linear or radial.
  2. Set the stops and the angle or position.
  3. Copy the CSS when the swatch looks right.

Common uses

Build a hero wash, a button fill, or a slide background without opening a design app. It is two or three stops, not a full mesh editor.

Privacy

Numbers and text stay in this tab. We do not log them. Refresh the page and the form is blank. We never see what you copy.