surface holographic foil iridescent premium premium badges and subscription cards launch callouts with luxury surface treatment editorial promo blocks that need material character glass alone is not enough material variety need a premium foil look without images want iridescent surfaces in pure CSS
Holographic Foil
Fetch snippet JSON:
curl https://webspire.de/snippets/surfaces/holographic-foil.json Surfaces
Holographic Foil
Iridescent material treatment for flagship callouts.
Background
Customize
Quick Start
<div class="holographic-foil rounded-[2rem] p-8 text-white"></div>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- A11y
- prefers-reduced-motion
- Size
- 1091 bytes · 47 lines
- Custom Properties
-
--foil-base--foil-border--foil-speed - Classes
-
.holographic-foil
surface holographic foil iridescent premium
An iridescent material treatment that feels closer to foil or coated acrylic than plain glow. Use it sparingly on premium CTAs, badges or flagship cards.
Foil callout
<div class="holographic-foil rounded-[2rem] p-8 text-white">
<p class="text-sm uppercase tracking-[0.2em] text-white/70">Flagship</p>
<h3 class="mt-3 text-2xl font-semibold">Holographic surface</h3>
</div>