Colour bits

Gradient Builder

Generate smooth CSS gradients and copy the exact code needed for your project.

Gradient preview

Live background

The preview updates as you tune the stops.

CSS gradient

Linear 135deg 3 stops ready

Generated CSS

Shape the gradient

Pick a gradient type, tune the angle and stops, then copy the CSS for your project.

Gradient type

Angle 135deg

Use a middle colour stop

Start colour

Position 0%

Middle colour

Position 52%

End colour

Position 100%

Accepted colour values

HEX, RGB, HSL, named colours, and other browser-supported CSS colour values work here.