Home › Design Tools › Gradient Generator

Gradient Generator

Build a CSS linear or radial gradient with 2 to 6 colour stops, then copy the CSS.

Gradient type Linear Radial

Angle (0 to 360 degrees)

Colour stops (2 to 6)

Preview

CSS

The line above is ready to paste into a stylesheet rule. Copy copies the same line.

How it works

Linear gradients run along the angle you set, where 0 degrees points up and 90 degrees points right. Radial gradients start at the centre point you set. Each colour stop is a colour and a position from 0% to 100%. The list is kept in position order, so the first stop is the one nearest 0%. Stops at the same position make a hard edge.

A colour must be a hex value such as #4f46e5 or #fff. If a value is not valid, the result shows an error and the CSS is not updated until the value is fixed.