Holographic gradients and iridescence, explained

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.

Holographic gradient examples

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.

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.

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.

.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; }
}

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 shows how to animate gradients efficiently.

Keeping holographic gradients tasteful

Holographic finishes belong to Y2K aesthetics, 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 and dark type.

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.

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.