Gradient stops
Coral
#FCA5A5 0% Red
#EF4444 50% Crimson
#991B1B 100% CSS gradient
Red Gradient
A red gradient from soft coral-red through vivid red to deep crimson.
A high-energy gradient; avoid relying on red alone for semantic error or warning meaning.
Red gradients are visually strong, so they work best when the design intentionally controls intensity and avoids turning every surface into an alert.
CSS
.example {
background: linear-gradient(135deg, #FCA5A5 0%, #EF4444 50%, #991B1B 100%);
}Gradient contrast varies across the surface. Test important text against every area it may overlap instead of relying on a single midpoint color.
Angle previews
90°
135°
180°
Ready-to-use variations
Rose to red
Light rose through deep red.
linear-gradient(135deg, #FFE4E6 0%, #F43F5E 50%, #991B1B 100%) Red orange
Warm energetic transition.
linear-gradient(120deg, #EF4444 0%, #F97316 55%, #FBBF24 100%) Crimson wine
Deeper editorial red direction.
linear-gradient(150deg, #FB7185 0%, #BE123C 52%, #4C0519 100%) Tuning tips
- Reserve high-chroma red gradients for areas that can carry strong visual weight.
- Do not rely on red alone to convey errors.
- Light rose and deep wine may require different foreground colors on the same gradient.
Related gradients
Orange Gradient
An orange gradient from light peach through vivid orange to deep burnt orange.
Pink Gradient
A pink gradient from soft blush through vivid pink to deep berry.
Rainbow Gradient
A six-stop rainbow gradient moving through red, orange, yellow, green, blue, and violet.
Black Gradient
A restrained dark gradient from near-black navy through charcoal to soft black.