Holographic Bloom
iridescent, pearlescent, futuristic
This midnight to graphite linear gradient is an editable CSS color system generated with OKLCH-aware perceptual interpolation, multi-stop fallback compilation, and Tailwind CSS utility export. It preserves chroma during transitions, reducing muddy gray midpoints while giving developers production-ready CSS and designers precise visual control.
Editable gradient preset
midnight to graphite linear CSS gradient
Edit this gradient in the studio, copy production CSS, compare accessibility, and explore related color combinations generated from the same seed colors.
#20061a#243c19
Gradient guide
How to use this midnight to graphite gradient
This linear gradient can be used as a hero background, dashboard card treatment, app shell backdrop, social visual, or landing page accent. The color sequence is parsed directly from the URL, which means the preset can be shared, edited, and revisited later.
The export system creates a standard CSS fallback, a perceptual multi-stop fallback, and a modern OKLCH declaration where appropriate. That makes the output useful for production interfaces, not just screenshots or static inspiration boards.
Use the related-gradient matrix below to explore adjacent hues, lightness shifts, and palette variations. Each suggestion is generated deterministically so the same colours always return the same related ideas.
Interactive editor
Edit this gradient
Physics Preview Workspace
Perceptual CSS gradients without muddy midpoints.
Build layered linear, radial, conic, and mesh gradients using OKLCH, LAB, HCL, easing curves, blend modes, and fallback compilers.
White text
15.58:1
WCAG AA friendly
Black text
1.42:1
Needs overlay
Export ready
CSS
Fallbacks · Tailwind · SVG
Pre-rendered CSS output
.css-gradient-pro-gradient {
background: linear-gradient(135deg, #20061a 0%, #243c19 100%);
background: linear-gradient(135deg, #20061a 0%, #21061a 9.1%, #250618 18.2%, #2c0714 27.3%, #330a0c 36.4%, #391200 45.5%, #3a1d00 54.5%, #362900 63.6%, #303200 72.7%, #2a380e 81.8%, #253b16 90.9%, #243c19 100%);
background: linear-gradient(135deg in oklch, oklch(17.96% 0.0556 337.56) 0%, oklch(32.66% 0.0650 136.70) 100%);
background-blend-mode: normal;
}Full-width inspiration gallery
120 mathematically tuned gradient collections.
Browse ready-made colour systems and copy inspiration for landing pages, hero sections, cards, banners, dashboards, and product visuals.
Holographic
10 collections
Preset
Holographic Pulse
iridescent, pearlescent, futuristic
Holographic Drift
iridescent, pearlescent, futuristic
Holographic Halo
iridescent, pearlescent, futuristic
Holographic Signal
iridescent, pearlescent, futuristic
Holographic Mist
iridescent, pearlescent, futuristic
Holographic Nova
iridescent, pearlescent, futuristic
Holographic Orbit
iridescent, pearlescent, futuristic
Holographic Flux
iridescent, pearlescent, futuristic
Holographic Veil
iridescent, pearlescent, futuristic
Cyberpunk
10 collections
Cyberpunk Bloom
neon, electric, high contrast
Cyberpunk Pulse
neon, electric, high contrast
Cyberpunk Drift
neon, electric, high contrast
Cyberpunk Halo
neon, electric, high contrast
Cyberpunk Signal
neon, electric, high contrast
Cyberpunk Mist
neon, electric, high contrast
Cyberpunk Nova
neon, electric, high contrast
Cyberpunk Orbit
neon, electric, high contrast
Cyberpunk Flux
neon, electric, high contrast
Cyberpunk Veil
neon, electric, high contrast
Pastel
10 collections
Pastel Bloom
soft, airy, gentle
Pastel Pulse
soft, airy, gentle
Pastel Drift
soft, airy, gentle
Pastel Halo
soft, airy, gentle
Pastel Signal
soft, airy, gentle
Pastel Mist
soft, airy, gentle
Pastel Nova
soft, airy, gentle
Pastel Orbit
soft, airy, gentle
Pastel Flux
soft, airy, gentle
Pastel Veil
soft, airy, gentle
Duotone
10 collections
Duotone Bloom
editorial, bold, brand-ready
Duotone Pulse
editorial, bold, brand-ready
Duotone Drift
editorial, bold, brand-ready
Duotone Halo
editorial, bold, brand-ready
Duotone Signal
editorial, bold, brand-ready
Duotone Mist
editorial, bold, brand-ready
Duotone Nova
editorial, bold, brand-ready
Duotone Orbit
editorial, bold, brand-ready
Duotone Flux
editorial, bold, brand-ready
Duotone Veil
editorial, bold, brand-ready
Retro 80s
10 collections
Retro 80s Bloom
synthwave, nostalgic, saturated
Retro 80s Pulse
synthwave, nostalgic, saturated
Retro 80s Drift
synthwave, nostalgic, saturated
Retro 80s Halo
synthwave, nostalgic, saturated
Retro 80s Signal
synthwave, nostalgic, saturated
Retro 80s Mist
synthwave, nostalgic, saturated
Retro 80s Nova
synthwave, nostalgic, saturated
Retro 80s Orbit
synthwave, nostalgic, saturated
Retro 80s Flux
synthwave, nostalgic, saturated
Retro 80s Veil
synthwave, nostalgic, saturated
Dark Mode
10 collections
Dark Mode Bloom
deep, premium, low glare
Dark Mode Pulse
deep, premium, low glare
Dark Mode Drift
deep, premium, low glare
Dark Mode Halo
deep, premium, low glare
Dark Mode Signal
deep, premium, low glare
Dark Mode Mist
deep, premium, low glare
Dark Mode Nova
deep, premium, low glare
Dark Mode Orbit
deep, premium, low glare
Dark Mode Flux
deep, premium, low glare
Dark Mode Veil
deep, premium, low glare
Aurora
10 collections
Aurora Bloom
organic, atmospheric, luminous
Aurora Pulse
organic, atmospheric, luminous
Aurora Drift
organic, atmospheric, luminous
Aurora Halo
organic, atmospheric, luminous
Aurora Signal
organic, atmospheric, luminous
Aurora Mist
organic, atmospheric, luminous
Aurora Nova
organic, atmospheric, luminous
Aurora Orbit
organic, atmospheric, luminous
Aurora Flux
organic, atmospheric, luminous
Aurora Veil
organic, atmospheric, luminous
Glassmorphism
10 collections
Glassmorphism Bloom
translucent, modern, dimensional
Glassmorphism Pulse
translucent, modern, dimensional
Glassmorphism Drift
translucent, modern, dimensional
Glassmorphism Halo
translucent, modern, dimensional
Glassmorphism Signal
translucent, modern, dimensional
Glassmorphism Mist
translucent, modern, dimensional
Glassmorphism Nova
translucent, modern, dimensional
Glassmorphism Orbit
translucent, modern, dimensional
Glassmorphism Flux
translucent, modern, dimensional
Glassmorphism Veil
translucent, modern, dimensional
Vaporwave
10 collections
Vaporwave Bloom
dreamy, digital, surreal
Vaporwave Pulse
dreamy, digital, surreal
Vaporwave Drift
dreamy, digital, surreal
Vaporwave Halo
dreamy, digital, surreal
Vaporwave Signal
dreamy, digital, surreal
Vaporwave Mist
dreamy, digital, surreal
Vaporwave Nova
dreamy, digital, surreal
Vaporwave Orbit
dreamy, digital, surreal
Vaporwave Flux
dreamy, digital, surreal
Vaporwave Veil
dreamy, digital, surreal
Nature
10 collections
Nature Bloom
earthy, calm, botanical
Nature Pulse
earthy, calm, botanical
Nature Drift
earthy, calm, botanical
Nature Halo
earthy, calm, botanical
Nature Signal
earthy, calm, botanical
Nature Mist
earthy, calm, botanical
Nature Nova
earthy, calm, botanical
Nature Orbit
earthy, calm, botanical
Nature Flux
earthy, calm, botanical
Nature Veil
earthy, calm, botanical
Luxury
10 collections
Luxury Bloom
premium, elegant, metallic
Luxury Pulse
premium, elegant, metallic
Luxury Drift
premium, elegant, metallic
Luxury Halo
premium, elegant, metallic
Luxury Signal
premium, elegant, metallic
Luxury Mist
premium, elegant, metallic
Luxury Nova
premium, elegant, metallic
Luxury Orbit
premium, elegant, metallic
Luxury Flux
premium, elegant, metallic
Luxury Veil
premium, elegant, metallic
Minimal
10 collections
Minimal Bloom
clean, balanced, interface-friendly
Minimal Pulse
clean, balanced, interface-friendly
Minimal Drift
clean, balanced, interface-friendly
Minimal Halo
clean, balanced, interface-friendly
Minimal Signal
clean, balanced, interface-friendly
Minimal Mist
clean, balanced, interface-friendly
Minimal Nova
clean, balanced, interface-friendly
Minimal Orbit
clean, balanced, interface-friendly
Minimal Flux
clean, balanced, interface-friendly
Minimal Veil
clean, balanced, interface-friendly