Digital / Web UI
Holographic
An iridescent foil-like material with shifting color bands, pearly highlights, and a thin-film feeling.
Hg
Usage
- Launch badges
- Pricing cards
- Collectible panels
Adjustable parameters
- hue range
- grain
- highlight
- angle
- saturation
AI Prompt
Create a holographic foil surface with iridescent color shifts, pearly highlights, fine grain, and a restrained premium feel. Avoid rainbow clutter.
Tailwind notes
Use conic-gradient or layered radial gradients with background-size. Keep saturation controlled.
Performance notes
Static holographic gradients are fine. Keep hover shimmer small and respect reduced motion.
CSS
.holographic {
border-radius: 18px;
background:
linear-gradient(120deg, rgba(255,255,255,.55), rgba(255,255,255,0) 34%),
conic-gradient(from 220deg, #b6fff1, #ffb8e8, #fff3a8, #a9c7ff, #b6fff1);
box-shadow: inset 0 1px rgba(255,255,255,.55), 0 20px 60px rgba(255, 120, 220, .16);
}React example
export function HolographicBadge({ children }) {
return <span className="holographic">{children}</span>;
}