Cyan Indigo Flow
#06b6d4 · #2563eb · #312e81
linear-gradient(135deg, #06b6d4 8%, #2563eb 50%, #312e81 92%)
Gradient gallery
Blue Gradient: CSS gradients, backgrounds, and downloadable images
Blue gradients work well when a design needs trust, clarity, and a quiet product feel. These examples range from bright cyan-to-indigo backgrounds to deep navy gradients for dashboards and app screens.
Ready-to-use blue gradient examples
Use blue gradients for product headers, analytics screens, onboarding backgrounds, and calm call-to-action areas. Add a dark overlay when placing white text over bright cyan stops.
Arctic Dashboard
#e0f2fe · #38bdf8 · #1d4ed8
linear-gradient(120deg, #e0f2fe 14%, #38bdf8 50%, #1d4ed8 86%)
Deep Ocean UI
#020617 · #0f766e · #1d4ed8
linear-gradient(145deg, #020617 11%, #0f766e 50%, #1d4ed8 89%)
Electric Blue Card
#0ea5e9 · #3b82f6 · #8b5cf6
linear-gradient(115deg, #0ea5e9 16%, #3b82f6 50%, #8b5cf6 84%)
Midnight Product
#030712 · #1e3a8a · #67e8f9
linear-gradient(135deg, #030712 8%, #1e3a8a 50%, #67e8f9 92%)
Soft Blue Cloud
#dbeafe · #93c5fd · #60a5fa
linear-gradient(135deg, #dbeafe 8%, #93c5fd 50%, #60a5fa 92%)
Neon Blue Edge
#0f172a · #0284c7 · #22d3ee
linear-gradient(128deg, #0f172a 10%, #0284c7 50%, #22d3ee 90%)
Steel Interface
#111827 · #475569 · #38bdf8
linear-gradient(140deg, #111827 8%, #475569 50%, #38bdf8 92%)
Blue Aurora Radial
#020617 · #2563eb · #67e8f9
radial-gradient(circle at 48% 44%, #2563eb 0%, transparent 44%), radial-gradient(circle at 18% 78%, #020617 0%, transparent 44%), radial-gradient(circle at 82% 18%, #67e8f9 0%, transparent 44%), linear-gradient(135deg, #020617, #07070d)
Cyan Product Glow
#031525 · #0ea5e9 · #a5f3fc
radial-gradient(circle at 24% 26%, #031525 0%, transparent 44%), radial-gradient(circle at 58% 50%, #0ea5e9 0%, transparent 44%), radial-gradient(circle at 82% 74%, #a5f3fc 0%, transparent 44%), linear-gradient(135deg, #031525, #07070d)