Use analogous colours for smooth, professional gradients
Gradients between colours that are close on the colour wheel (analogous colours) always look smooth and professional: blue to purple, orange to red, green to teal. Gradients between complementary colours (opposite on the wheel, like orange to blue) create vibrant but potentially garish transitions, and often produce a muddy neutral in the middle. If you want high contrast, keep the transition short or add a strong middle colour to avoid the grey zone.
Subtle gradients outperform dramatic ones in UI
The most effective UI gradients are barely perceptible — a slight darkening or lightening from top to bottom that creates depth without drawing attention. A button that goes from #6366F1 at top to #4F46E5 at bottom looks more three-dimensional than a flat button, without looking garish. Reserve dramatic multi-colour gradients for hero backgrounds and decorative elements, not interactive components.
Diagonal gradients feel more dynamic
45-degree and 135-degree gradients (diagonal) feel more dynamic and modern than strict horizontal (90deg) or vertical (0deg or 180deg) gradients. Most contemporary SaaS product hero backgrounds use a subtle diagonal gradient. 135deg (top-left to bottom-right) is the most common choice in modern design systems.
Add a gradient to text for impact
CSS gradient text is a popular effect: background: linear-gradient(...); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;. Generate the gradient here, copy the background property value, and apply the text clip technique. Works best on large display text where the gradient is clearly visible.
Test gradients on different screen types
Gradients look significantly different on OLED screens (deeper blacks, more saturated colours) vs standard LCD displays. A gradient that looks rich and vibrant on your OLED laptop may look washed out on a projector or cheaper monitor. If your audience uses diverse devices, test on multiple screens or stay within the sRGB colour gamut and avoid very saturated stops.