# Holographic gradients and iridescence, explained

[Canonical HTML page](https://gradiently.design/guide/holographic-gradients)

Holographic foil, soap bubbles and pearl all change colour as you move. A flat screen can't do that, but a well-built gradient can convince the eye it does.

## The short version

- A holographic gradient imitates materials that change colour with the viewing angle, such as holographic foil, soap bubbles and mother of pearl.
- Real iridescence comes from light interfering in thin layers or scattering off fine ridges, which is why the colours shift in rainbow order as you move.
- On screen, a conic gradient of pale rainbow hues plus a moving white sheen is the most convincing way to fake it.
- Holographic gradients look best in pale, pearly tones with a bright highlight, rather than in fully saturated rainbow colours.
- Holographic effects work as an accent on a card, a sticker or a product surface, and tire quickly when they cover everything.

A **holographic gradient** is a gradient that imitates iridescent materials, like holographic foil, soap bubbles, oil on water or mother of pearl, whose colour changes as you move them. On screen that means pale rainbow hues flowing into each other, usually with a bright white sheen crossing the surface. The best ones feel like a material catching light; the worst look like a rainbow clip-art sticker. The difference is almost entirely restraint.

## What makes something iridescent

Iridescence is colour that depends on the angle you look from. In a soap bubble or an oil slick, light reflects off the top and bottom of a very thin film, and the two reflections interfere, strengthening some colours and cancelling others. In holographic foil and on the back of a CD, microscopic ridges split light into its colours, like a prism. Either way, the result is the same to the eye: colours in rainbow order that slide across the surface as it tilts.

| Look | What you see | How to fake it |
| --- | --- | --- |
| Holographic foil | Sharp bands of rainbow colour that jump with angle | Conic or striped gradients with crisp highlights |
| Iridescent | Soft rainbow shifts across a smooth surface | Pale conic or mesh gradients, slow sheen |
| Pearlescent | Mostly white with faint pink, blue and green hints | Near-white radial gradient with tinted edges |
| Oil slick | Rainbow colours swirling on a dark surface | Dark ground with muted rainbow bands |
| Chrome | Grey mirror bands, no rainbow | Hard light and dark bands in greys |

Five related finishes. Holographic and iridescent are the rainbow ones; pearl and chrome are their quieter cousins.

## Holographic gradient examples

- Conic foil: `conic-gradient(from 210deg at 50% 50%, #ffd6f5, #d9c8ff, #bfe9ff, #c9ffe6, #fff4c2, #ffd6f5)`
- Linear iridescence: `linear-gradient(120deg, #ffd1f0 0%, #c7d2fe 25%, #a5f3fc 50%, #bbf7d0 70%, #fef9c3 85%, #fbcfe8 100%)`
- Pearl: `radial-gradient(ellipse at 30% 25%, #ffffff 0%, #f5eefc 30%, #dfe7f5 60%, #e9dff2 100%)`
- Oil slick: `linear-gradient(135deg, #1b1033 0%, #3b2a7a 30%, #1f6f78 55%, #7a5a1f 75%, #3a1a4a 100%)`
- Chrome: `linear-gradient(180deg, #f8fafc 0%, #cbd5e1 35%, #64748b 50%, #e2e8f0 65%, #94a3b8 100%)`
- Foil stripes: `repeating-linear-gradient(115deg, #fbcfe8 0px, #c7d2fe 40px, #a5f3fc 80px, #bbf7d0 120px, #fbcfe8 160px)`

Six finishes as single CSS values. Notice how pale the rainbow colours are: that is what makes them read as foil rather than a flag.

## Why conic gradients work so well

A conic gradient changes colour as you travel around a point, so its hues fan out from a centre, like light scattering off a curved foil. Set the centre off the edge of the shape and the fan becomes gentle diagonal bands. Change the `from` angle and every colour slides, which is exactly what iridescence does when you tilt it. The details of the syntax are in [conic gradients](https://gradiently.design/guide/conic-gradient).

- Pink flash: #ffd6f5
- Lilac: #d9c8ff
- Ice blue: #bfe9ff
- Mint: #c9ffe6
- Butter: #fff4c2
- Sheen: #ffffff

A holographic palette is a pale rainbow in order, plus white. Skipping steps or shuffling the order breaks the illusion.

Keep every hue at a similar, high lightness. Real foil reflects a lot of light, so its colours are bright and slightly washed with white. If one colour is much darker or more saturated than the rest, it reads as a stripe of paint instead of a reflection. Pale colours also forgive: they don't turn grey where they meet, because they are all so close to white.

> **Where the light is** Decide where the light comes from and put the brightest sheen there. A holographic surface with its highlight in the wrong place looks flat, however good its colours are.

## How to make a holographic effect in CSS

Two layers do most of the work: a pale conic rainbow underneath, and a narrow band of white on top that moves across when the element is hovered, like light sliding over foil. Keep the movement slow and switch it off for people who prefer reduced motion.

```css
.holo {
  background-image:
    linear-gradient(115deg, transparent 35%, rgb(255 255 255 / 0.6) 50%, transparent 65%),
    conic-gradient(from 210deg at 50% 50%, #ffd6f5, #d9c8ff, #bfe9ff, #c9ffe6, #fff4c2, #ffd6f5);
  background-size: 250% 100%, 100% 100%;
  background-position: 100% 0, 0 0;
  transition: background-position 0.9s ease;
  border-radius: 20px;
}

.holo:hover {
  background-position: 0% 0, 0 0;
}

@media (prefers-reduced-motion: reduce) {
  .holo { transition: none; }
}
```

A pale conic foil with a white sheen that sweeps across on hover. The sheen layer is 250% wide so it can travel.

For more realism, add a very fine grain over the whole surface, and let a second, fainter sheen run at a different angle. If you want the whole field to drift on its own, [animated gradient backgrounds](https://gradiently.design/guide/animated-gradient-background) shows how to animate gradients efficiently.

## Keeping holographic gradients tasteful

### Clip art

- Fully saturated rainbow colours
- Holographic effect on every surface
- Busy foil behind body text
- Fast, constant shimmer

### Material

- Pale, pearly hues in rainbow order
- One holographic object: a card, a badge, a product
- Solid or calm ground behind the words
- A slow sheen that moves when something happens

Holographic finishes belong to [Y2K aesthetics](https://gradiently.design/guide/y2k-aesthetic), beauty packaging, trading cards, festival wear and tech accessories. On a brand, treat the effect like foil on a printed box: used in one place, it signals something special. Pair it with plenty of white or a calm [pastel ground](https://gradiently.design/guide/pastel-gradients) and dark type.

A product drop post announcing a limited foil edition on a soft, pale gradient

A drop announcement is a natural home for a pale, shifting surface: the finish itself says limited.

## Holographic in print and packaging

No combination of ordinary inks can reproduce real iridescence, because printed ink doesn't change with angle. A printed holographic gradient will look like a pale rainbow, which can be lovely, but for the real thing you need holographic foil or iridescent film from your printer. If you are designing for both, keep the screen version pale and simple, so the printed one doesn't disappoint; see [print gradients](https://gradiently.design/guide/print-gradients).

You can find pale, pearly Marks in the Market by searching colour words like "pearl" or "iridescent lilac", and design with them at any size.

## FAQ

### What is a holographic gradient?

A holographic gradient imitates iridescent materials such as foil, soap bubbles and pearl, using pale rainbow hues in order and a bright sheen.

### What is the difference between holographic and iridescent?

Holographic foil shows sharper, jumping rainbow bands; iridescent surfaces show softer, smoother colour shifts. Both change with viewing angle.

### How do I make a holographic effect in CSS?

Use a pale `conic-gradient` of rainbow hues and layer a moving white `linear-gradient` sheen over it, animated on hover or scroll.

### What colours make a holographic gradient?

Pale pink, lilac, ice blue, mint and butter yellow, in rainbow order, plus white for the sheen.

### Can you print a holographic gradient?

Ink alone can only print a pale rainbow. For a true holographic finish, ask your printer about holographic foil or iridescent film.