Prismatic rainbow gradients that shift like holographic foil. Cosmic dark background. Every color at maximum saturation.
Signature Interaction
Hover each button to watch color flow laterally — bg-[length:200%_auto] + hover:bg-right in action.
Classic holographic foil — the full rainbow sweep
bg-gradient-to-r from-[#ff0080] via-[#ffd700] to-[#00d4ff] bg-[length:200%_auto] hover:bg-rightComponent Library
primary
Primary CTA — full rainbow sweep
secondary
Secondary — purple to cyan
warm
Warm — pink through orange to gold
cool
Cool — green through cyan to indigo
golden
Golden — gold through orange to pink
ghost
Ghost — semi-transparent glass
icon + label
disabled state
Animated Surfaces
Four foil variants demonstrating how background-size, animation speed, and gradient angle combine to produce distinct holographic moods.
Slow Drift
backgroundSize: 300% · 8s easeColor System
Six spectrum stops that combine to produce every holographic gradient. Click any chip to copy its hex value.
Full Spectrum Gradient
Design Rules
Six laws that govern every holographic surface. Follow them and the prism illusion holds — break them and it collapses.
Use multi-stop gradients spanning at least 3 hues across 120deg+ of the color wheel. bg-gradient-to-r with 3+ color stops minimum.
Never use two-stop gradients — they lack the iridescent depth that defines holographic foil.
Layer bg-white/5 + backdrop-blur-xl + border-white/10 over the dark cosmic background to simulate translucent holographic film.
Never use opaque light backgrounds — holographic lives in deep space, not in daylight. bg-white is forbidden.
Use bg-[length:200%_auto] + hover:bg-right for lateral color-flow on every interactive element. Motion must feel like light refracting across foil.
Never animate with opacity fades alone — hover:opacity-80 misses the holographic essence entirely.
Combine dual-color box-shadows on hover — one for the primary hue, one for the accent. Two-tone shadows sell the holographic illusion.
Never use a single-color glow. A monochrome shadow is flat; holographic foil always refracts into multiple frequencies.
Always use #0a0a1f (cosmic near-black) as the base background. High saturation colors only reach their peak vividness against near-black.
Never use white, light gray, or any background above 15% lightness. Pastel colors on light backgrounds are not holographic.
Use holographic sticker badges — semi-transparent gradient backgrounds with border-white/20 and animation — to label special UI states.
Never use solid color badges without gradient treatment. Even status pills should shimmer with at least a 2-hue gradient.
Join the designers building with prismatic gradients. No beige. No flat colors. No boring.