CSS Gradient Maker

Create beautiful CSS gradients with up to 8 colour stops. Choose between linear and radial, set the angle and copy the code.

Presets

Type

Angle: 135deg

0deg = bottom to top, 90deg = left to right, 180deg = top to bottom

Colour Stops

CSS Code

background: linear-gradient(135deg, #0891B2 0%, #6366F1 100%);

Preview on Elements

Button

Creating CSS Gradients

CSS gradients create smooth transitions between two or more colours. They are rendered as images and can be used anywhere you would use an image in CSS, most commonly as backgrounds.

Linear gradients transition along a straight line defined by an angle. 0deg goes bottom to top, 90deg goes left to right, and 180deg goes top to bottom.

Radial gradients radiate outward from a centre point. They are perfect for creating spotlight effects, glows and organic-looking backgrounds.