All tools › 🎨 Design

CSS gradient generator

Design linear and radial gradients visually and copy the CSS.

Type

Angle: 90°

Colours

Presets

CSS

How it works

Pick the type and angle, set colours and their positions, and copy the ready-to-use CSS.

Linear gradients run along a line at the chosen angle (90° is left to right); radial gradients spread out from the centre.