Graphite Glass
#020617 · #111827 · #475569
linear-gradient(135deg, #020617 8%, #111827 50%, #475569 92%)
Gradient gallery
Black Gradient: CSS gradients, backgrounds, and downloadable images
Black gradients are useful when the design needs depth without visual noise. The strongest black gradients add subtle blue, violet, graphite, gold, or green undertones so the background does not look flat.
Ready-to-use black gradient examples
Use black gradients for luxury pages, dark mode apps, editorial headers, product previews, and portfolio sections. Keep text contrast high and avoid placing dark copy on smoky areas.
Black Gold Luxury
#030712 · #3f2a08 · #f59e0b
linear-gradient(128deg, #030712 10%, #3f2a08 50%, #f59e0b 90%)
Midnight Violet
#020617 · #1e1b4b · #7c3aed
linear-gradient(140deg, #020617 8%, #1e1b4b 50%, #7c3aed 92%)
Cinematic Fade
#000000 · #18181b · #52525b
linear-gradient(120deg, #000000 14%, #18181b 50%, #52525b 86%)
Dark Teal Edge
#020617 · #042f2e · #2dd4bf
linear-gradient(135deg, #020617 8%, #042f2e 50%, #2dd4bf 92%)
Obsidian Blue
#000000 · #0f172a · #1d4ed8
linear-gradient(145deg, #000000 11%, #0f172a 50%, #1d4ed8 89%)
Charcoal Rose
#09090b · #3f0f1f · #f43f5e
linear-gradient(122deg, #09090b 13%, #3f0f1f 50%, #f43f5e 87%)
Soft Black Surface
#0a0a0f · #27272a · #71717a
linear-gradient(130deg, #0a0a0f 8%, #27272a 50%, #71717a 92%)
Obsidian Glow Radial
#000000 · #1e1b4b · #7c3aed
radial-gradient(circle at 50% 46%, #1e1b4b 0%, transparent 44%), radial-gradient(circle at 82% 18%, #7c3aed 0%, transparent 44%), radial-gradient(circle at 18% 78%, #000000 0%, transparent 44%), linear-gradient(135deg, #000000, #07070d)
Graphite Signal Radial
#020617 · #334155 · #67e8f9
radial-gradient(circle at 22% 26%, #020617 0%, transparent 44%), radial-gradient(circle at 56% 52%, #334155 0%, transparent 44%), radial-gradient(circle at 84% 76%, #67e8f9 0%, transparent 44%), linear-gradient(135deg, #020617, #07070d)