Light & surface · 2017–present
Holographic
Rainbow iridescence that cycles all hues as if caught on a tilted sheet of holographic foil — prismatic, shifting, metallic.
Live preview base style — press Wear
$2,100
Revenue, up 12% from last month.
| Customer | Plan | Status | MRR |
|---|---|---|---|
| Northwind | Studio | Active | $1,240 |
| Acme Labs | Team | Trial | $0 |
| Kaldi Coffee | Studio | Active | $860 |
Use this style 15 tokens
- --bg
oklch(97% 0.005 300) - --fg
oklch(20% 0.01 290) - --muted
oklch(52% 0.015 290) - --surface
oklch(100% 0 0) - --surface-2
oklch(96% 0.008 295) - --border
oklch(88% 0.02 300) - --accent
oklch(60% 0.22 290) - --accent-fg
oklch(99% 0 0) - --focus
oklch(60% 0.22 290)
| Token | Value |
|---|---|
| --font-body | 'Space Grotesk', system-ui, sans-serif |
| --font-display | 'Space Grotesk', system-ui, sans-serif |
| --radius | 14px |
| --radius-sm | 8px |
| --shadow | 0 2px 12px oklch(50% 0.12 300 / 0.1), 0 1px 0 oklch(100% 0 0 / 0.8) inset |
| --shadow-lg | 0 16px 48px oklch(50% 0.12 300 / 0.18) |
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600;700;800&display=swap');
:root {
--bg: oklch(97% 0.005 300);
--fg: oklch(20% 0.01 290);
--muted: oklch(52% 0.015 290);
--surface: oklch(100% 0 0);
--surface-2: oklch(96% 0.008 295);
--border: oklch(88% 0.02 300);
--accent: oklch(60% 0.22 290);
--accent-fg: oklch(99% 0 0);
--focus: oklch(60% 0.22 290);
--font-body: 'Space Grotesk', system-ui, sans-serif;
--font-display: 'Space Grotesk', system-ui, sans-serif;
--radius: 14px;
--radius-sm: 8px;
--shadow: 0 2px 12px oklch(50% 0.12 300 / 0.1), 0 1px 0 oklch(100% 0 0 / 0.8) inset;
--shadow-lg: 0 16px 48px oklch(50% 0.12 300 / 0.18);
}Where it came from
Origin: Holographic foil stickers, trading cards, and premium packaging
Holographic foil has appeared on stickers, trading cards, and premium packaging for decades. As CSS gradient support improved and the Y2K aesthetic returned, holographic palettes became popular in UI and brand design. Full-spectrum gradients that rotate through every hue appeared on fintech cards, SaaS landing pages, and fashion brand sites from around 2017. The challenge is always text legibility on a surface that changes colour continuously.
How to spot it
- Full-spectrum rainbow gradient cycling all hues (hue rotation from 0 to 360)
- Metallic sheen suggestion via white highlight overlays
- Colour applied to borders, accents, or surface tints — rarely as a fill for text
- Optional shimmer animation or hue-rotation on :hover
Trade-offs
| Strengths | Weaknesses |
|---|---|
| Extremely eye-catching and premium-feeling | Text on holographic surfaces is very hard to keep legible |
| Unique and memorable at the right scale | Overwhelms at large scale — one holographic element, not a page |
| Works beautifully for limited moments — cards, badges, hero accents | Overused by fintech and crypto products in 2019–2021 |
In the wild
- Pokémon holographic rare card treatment
- Premium fintech card face designs
- Y2K fashion brand hero sections
Use it when
Small accent moments — a single card, badge, or hero visual — where the prismatic effect earns its complexity rather than competing with content.