The syntax
linear-gradient() takes an optional direction followed by two or more colour stops. Stops can carry a position, as in #3B82F6 0%, so you control where the blend begins and ends.
- background: linear-gradient(90deg, #3B82F6, #8B5CF6);
- background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 50%, #EC4899 100%);
Choosing sensible colours
Gradients look best when the two colours are close in hue or already related — a colour and its shade, or two analogous hues. A gradient between opposite hues passes through a muddy middle, so use three stops on a hue path instead.
Avoiding banding
Wide, low-contrast gradients can show visible steps. Keep the gradient small in area, stay in a narrow lightness range, or add a subtle noise overlay. Avoid very long ramps between two nearly identical colours.
Fallback and accessibility
Provide a solid fallback colour so the design survives if the gradient is ignored, and check text contrast against the darkest part of the gradient — that is where legibility breaks first.