Gradients cycle in and out of web design fashion. The current wave favors subtle, purposeful gradients that add depth without garish multi-color transitions.
When Gradients Work
Hero backgrounds: A subtle gradient from your primary to a shifted hue adds depth. Brand identity: Some brands use gradient as a core identity element. Data visualization: Sequential color scales use gradients to show progression.
When Gradients Hurt
Behind text: Contrast changes at every point along the gradient. Small elements: Gradient on a small button adds noise without benefit. Multiple gradients: Competing gradients create visual chaos.
Gradient Accessibility
If text appears over a gradient, check contrast at the lowest-contrast point. Adding a semi-transparent overlay between gradient and text ensures consistent contrast.
Use gradients as accents, not foundations. One gradient per viewport is a safe maximum. Build from PaletteRx colors for guaranteed brand alignment.