Digital / Web UI
Holographic
Shifting color bands, pearly highlights और thin-film feeling वाला iridescent foil-like material.
Hg
Usage
- Launch badges
- Pricing cards
- Collectible panels
Parameters
- hue range
- grain
- highlight
- angle
- saturation
AI Prompt
Iridescent color shifts, pearly highlights और fine grain वाली restrained holographic foil surface बनाएं. Rainbow clutter से बचें.
Tailwind notes
conic-gradient या layered radial gradients उपयोग करें. Saturation controlled रखें.
Performance notes
Static gradients ठीक हैं. Hover shimmer छोटा रखें और 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>;
}