Red Gradients
Explore thousands of gradient combinations or generate a custom gradient with the Gradient Generator.
Red gradients sit around the 345 to 15 degree wrap point, so they naturally pull into coral, orange, and rose. This set is led by red to orange heat, red to pink softness, and a few red against blue contrasts.
Bold Crimson
Bold Rose
Balanced Coral
Smooth Scarlet
Fresh Rust
Vibrant Ruby
Classic Rose
Calm Rust
Calm Blush
Warm Flame
Fresh Wine
Powdery Coral
Crisp Crimson
Bold Flame
Radiant Scarlet
Bold Ember
Quiet Poppy
Cool Garnet
Smooth Rust
Natural Scarlet
Steady Rose
Classic Flame
Serene Crimson
Clean Scarlet
Warm Ruby
Natural Cardinal
Fresh Crimson
Serene Rust
Classic Wine
Calm Berry
Radiant Coral
Crisp Scarlet
Rich Wine
Steady Cardinal
Lush Wine
Vivid Crimson
Radiant Berry
Wispy Coral
Bold Coral
Radiant Crimson
Vibrant Garnet
Quiet Cherry
Vibrant Rust
Pure Rose
Pure Rust
Mellow Crimson
Serene Cardinal
Balanced Ember
Classic Poppy
Steady Scarlet
Crisp Flame
Ethereal Rose
Vivid Cherry
Soft Poppy
Gentle Ruby
Lush Ruby
Fresh Scarlet
Intense Garnet
Natural Rust
Lush Rust
Where Red Gradients Work
Use red gradients for launch graphics, sale banners, app alerts, and poster headers where the design needs heat fast. They also work as tight accents behind white logos or short display type. Body text needs care, since bright reds around #ff4d4d can vibrate against white. Test the stop under the text and aim for WCAG 4.5:1. Need a different angle or an extra stop? Adjust any of these in the Gradient Generator.
Frequently Asked Questions
How do I use red gradients in CSS?
Copy the linear-gradient value into background-image. A red to coral pair often reads cleanest at 135deg, with the darker stop behind text.
What colors make a good red gradient?
Red pairs well with orange, coral, rose, and pink. Shift 15 to 45 degrees warmer for heat, or cooler for a softer berry blend.