Crimson Launch
#450a0a · #dc2626 · #fb7185
linear-gradient(135deg, #450a0a 8%, #dc2626 50%, #fb7185 92%)
Gradient gallery
Red Gradient: CSS gradients, backgrounds, and downloadable images
Red gradients are expressive and high-energy. They work best when the palette includes enough depth, such as crimson, coral, burgundy, or warm orange, instead of a flat red-to-red ramp.
Ready-to-use red gradient examples
Use red gradients for launches, urgent states, campaign graphics, and bold hero panels. For interface alerts, keep surrounding UI simple so the red gradient does not overpower the message.
Coral Signal
#f97316 · #ef4444 · #be123c
linear-gradient(120deg, #f97316 14%, #ef4444 50%, #be123c 86%)
Ruby Product
#1f0207 · #991b1b · #f43f5e
linear-gradient(145deg, #1f0207 11%, #991b1b 50%, #f43f5e 89%)
Warm Action
#7f1d1d · #ef4444 · #fbbf24
linear-gradient(126deg, #7f1d1d 11%, #ef4444 50%, #fbbf24 89%)
Rose Heat
#881337 · #e11d48 · #fb7185
linear-gradient(135deg, #881337 8%, #e11d48 50%, #fb7185 92%)
Dark Red Glass
#0f0507 · #7f1d1d · #f87171
linear-gradient(140deg, #0f0507 8%, #7f1d1d 50%, #f87171 92%)
Festival Red
#b91c1c · #f97316 · #fde68a
linear-gradient(118deg, #b91c1c 15%, #f97316 50%, #fde68a 85%)
Magenta Flame
#701a75 · #e11d48 · #fb923c
linear-gradient(132deg, #701a75 8%, #e11d48 50%, #fb923c 92%)
Crimson Pulse Radial
#1f0207 · #dc2626 · #fb7185
radial-gradient(circle at 48% 46%, #dc2626 0%, transparent 44%), radial-gradient(circle at 80% 18%, #fb7185 0%, transparent 44%), radial-gradient(circle at 20% 80%, #1f0207 0%, transparent 44%), linear-gradient(135deg, #1f0207, #07070d)
Coral Heat Radial
#450a0a · #ef4444 · #fbbf24
radial-gradient(circle at 18% 28%, #450a0a 0%, transparent 44%), radial-gradient(circle at 54% 52%, #ef4444 0%, transparent 44%), radial-gradient(circle at 84% 74%, #fbbf24 0%, transparent 44%), linear-gradient(135deg, #450a0a, #07070d)