A gradient is a smooth blend between colours, and in CSS it is a background you can apply to anything. Building one visually and copying the generated code is far quicker than guessing angle and colour-stop values by hand.
Linear vs radial
A linear gradient blends along a straight line at an angle you choose — the default for buttons, headers and hero sections. A radial gradient blends outward from a point, like a soft spotlight. Most interface gradients are linear; radial is for glows and backgrounds.
How to build one
- Open the gradient generator.
- Pick your colours and drag the stops to position them.
- Set the angle, then copy the
backgroundCSS straight into your stylesheet.
Avoid the muddy middle
Blend two colours from opposite sides of the colour wheel — say red and green — and the midpoint turns a dull grey-brown. To keep a gradient vivid, use colours that sit near each other on the wheel, or add a third stop to guide the blend through a nicer intermediate colour.
Subtle looks professional: two shades of the same hue, or a small hue shift, almost always reads as more polished than a rainbow blend.