Holographic Bloom
iridescent, pearlescent, futuristic
This red to green 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
red to green 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.
#ff0000#97ec86
Gradient guide
How to use this red to green 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
2.72:1
Needs overlay
Black text
9.96:1
WCAG AA friendly
Export ready
CSS
Fallbacks · Tailwind · SVG
Pre-rendered CSS output
.css-gradient-pro-gradient {
background: linear-gradient(135deg, #ff0000 0%, #97ec86 100%);
background: linear-gradient(135deg, #ff0000 0%, #ff0f00 9.1%, #ff2900 18.2%, #ff4600 27.3%, #ff6600 36.4%, #f68a00 45.5%, #e1ab00 54.5%, #c8c600 63.6%, #b1d93e 72.7%, #a1e46b 81.8%, #99ea80 90.9%, #97ec86 100%);
background: linear-gradient(135deg in oklch, oklch(62.80% 0.2577 29.23) 0%, oklch(86.52% 0.1588 140.34) 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