CSS Gradient Generator

Build a linear or radial CSS gradient visually, with a live preview and one-click copy of the CSS.

Type

From

Angle (135°)

Presets

CSS

background: linear-gradient(135deg, #2449B8, #1E6B3A);

Ad space — always below the tool, never inside it

How to use css gradient generator

1Pick linear or radialChoose the gradient type.

2Pick your two coloursSet the from and to colours, and the angle for a linear gradient.

3Copy the CSSCopy the ready-to-use CSS background property.

This tool builds a simple two-colour gradient; for more stops, add extra comma-separated colours to the copied CSS manually.

Linear gradients transition in a straight line at an angle you choose; radial gradients transition outward from the centre in a circle.