CSS Gradient Generator
Build linear or radial CSS gradients from two or three colours, set the angle, preview the result and copy the CSS.
Build linear or radial CSS gradients from two or three colours, set the angle, preview the result and copy the CSS.
A CSS gradient is a smooth blend between two or more colours, written as a background value. Linear gradients run along an angle, radial gradients spread out from the centre.
Enter your colours, adjust the angle, check the preview and copy the CSS.
background: linear-gradient(45deg, #ff8800, #0055ff);
Anything CSS accepts: HEX, rgb(), hsl() and colour names.
0deg points up and 90deg points right. The gradient runs in that direction.
One of the colours may not be valid CSS. Check the spelling.
This tool supports up to three. You can add more by editing the CSS.