Design linear and radial gradients visually and copy the CSS.
Type
Last reviewed by the OnlineToolPro team
Build a CSS gradient with up to five colors, adjust the angle and each color's position, and see it change live. The code includes a solid fallback color.
How it works
3 simple steps. No experience needed.
Good to know
A linear gradient blends colors along a straight line at the angle you choose — 90° runs left to right, 180° top to bottom. A radial gradient spreads outward from the center.
Each color has a position from 0% to 100%. Moving two colors close together gives a sharp edge; spreading them apart makes a soft blend.
FAQ
It's a fallback for the rare browser that can't draw gradients.
Yes. The generated background-image code works on any element and can be layered with other backgrounds.
Other tools you might find useful next.
Generate and tidy up CSS with live previews. 4 free tools.