# Holographic

> Rainbow iridescence that cycles all hues as if caught on a tilted sheet of holographic foil — prismatic, shifting, metallic.

- Category: Light & surface
- Era: 2017–present
- Origin: Holographic foil stickers, trading cards, and premium packaging
- Lesson: https://design.dawit.dev/styles/holographic
- Try it: https://design.dawit.dev/styles/holographic?style=holographic

## Where it came from

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

## Strengths

- Extremely eye-catching and premium-feeling
- Unique and memorable at the right scale
- Works beautifully for limited moments — cards, badges, hero accents

## Weaknesses

- Text on holographic surfaces is very hard to keep legible
- Overwhelms at large scale — one holographic element, not a page
- 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.

## Related styles
[Frosted Acrylic](https://design.dawit.dev/styles/frosted-acrylic.md), [Gradient Borders](https://design.dawit.dev/styles/gradient-borders.md), [Y2K](https://design.dawit.dev/styles/y2k.md)