Red gradient
Red gradients carry more force per pixel than anything else on this page, which is both the appeal and the hazard. A red field already raises the pulse of a design; a red gradient adds depth without adding calm. The versions below run from pure heat to the restrained crimsons that let red work at scale.
5red gradients, ready to use
Red survives darkening better than any hue, so most of these run a bright red into its own deep shade, maroon doing the work black would do elsewhere. Ember is the one that crosses hues, red into gold, and it needs the warm midpoint to avoid mud. Red to blue is included because people ask for it; use it wide, so the violet midpoint gets room.
Crimson
linear-gradient(180deg, #DC143C, #800000)
In the color library: crimson #DC143C, maroon #800000
Ember
linear-gradient(120deg, #FF3B30, #FFD93D)
The fire blend: red into gold through a warm orange midpoint the browser supplies on its own.
Coral fade
linear-gradient(180deg, #FA8072, #DC143C)
In the color library: salmon #FA8072, crimson #DC143C
Red to blue
linear-gradient(90deg, #FF3B30, #0A84FF)
Opposing hues, so the middle passes through violet. Run it wide; cramped, the midpoint reads as grey.
Common questions
- What does a red gradient communicate?
- Urgency, heat and appetite, the same signals flat red sends, but with enough depth to feel deliberate rather than alarming. The darker the far stop, the more the gradient reads as serious instead of loud, which is why the crimson version suits interfaces the pure one does not.
- What color fades best from red?
- Its own shades first: crimson, then maroon. Among other hues, orange and gold sit next door and blend cleanly, which is every fire and ember effect ever made. Green is the one to avoid; the two meet in the middle at a brown neither side wants.
- How do I use a red gradient without overwhelming a page?
- Give it a job and a boundary: a hero band, a button, a callout, not the whole viewport. Keep text on the dark end where white passes contrast comfortably, and let the rest of the page stay neutral so the red keeps its authority.