# Iridescent gradients: pearly colour shifts with codes

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

Iridescence is the quiet cousin of holographic: a pearl, a soap bubble, the inside of a shell. These are the colours, codes and rules that make it look like a surface and not a rainbow.

## The short version

- An iridescent gradient blends several pale, closely related tints, usually lilac, mint, blush, sky and cream, so the surface seems to change colour as you look across it.
- Iridescence differs from holographic design in strength: holographic runs the full rainbow at high saturation, while iridescent stays soft, pale and mostly neutral.
- The pearly effect comes from a light base, low saturation, one white highlight and tints that sit next to each other on the colour wheel.
- Dark iridescence, like an oil slick or a beetle shell, uses the same idea on a near black ground with deep teal, violet and bronze.
- Text on an iridescent background needs a calm, even area behind it, because pale shifting tints give weak contrast to light type and busy contrast to dark type.

An **iridescent gradient** is a blend of pale tints that sit close together, typically lilac, mint, blush pink, sky blue and a warm cream, laid over a light base with a soft white highlight. The effect imitates real iridescent things: pearls, soap bubbles, the inside of an abalone shell. The colours are gentle and change gradually across the surface, so it reads as a sheen rather than a stripe of colour. The codes below are ready to paste into CSS or any design tool that accepts hex.

## Iridescent gradient codes

Each of these starts from a near white or a near black and adds tints that neighbour each other. Copy one as it is, or swap a single stop to make it yours.

- Pearl: `radial-gradient(ellipse at 30% 20%, #ffffff 0%, #f3eefa 25%, #e4ecf7 50%, #f4e9ef 75%, #ece6f6 100%)`
- Opal: `linear-gradient(135deg, #f6f1ff 0%, #dff3f4 30%, #fbe7f0 55%, #fff6e0 75%, #e9e4ff 100%)`
- Soap bubble: `radial-gradient(circle at 40% 35%, #ffffff 0%, #f0f9ff 30%, #fce7f3 55%, #e0f2fe 75%, #fef9c3 100%)`
- Abalone: `conic-gradient(from 160deg at 60% 40%, #e8f1f2, #d7e3f4, #efdcef, #e3f2e6, #f3ecd8, #e8f1f2)`
- Oil slick: `linear-gradient(125deg, #0d0f1a 0%, #1d3b4f 25%, #3b2a5c 45%, #1f4d3a 65%, #4a3a12 82%, #0d0f1a 100%)`
- Beetle shell: `linear-gradient(140deg, #052e2b 0%, #0f766e 35%, #1e3a8a 65%, #4c1d95 100%)`

Four light iridescent blends and two dark ones. All six keep their tints close in strength, which is what stops them reading as a rainbow.

Notice what the light ones have in common: no stop is fully saturated, and the lightest point is pure or almost pure white. Push any stop to a strong colour and the pearl turns into a [pastel gradient](https://gradiently.design/guide/pastel-gradients) or, further still, into a rainbow.

## Iridescent vs holographic

People often use the two words for the same thing, but in design they describe different looks. Holographic imitates foil stickers and credit card holograms: every hue, high saturation, hard bands. Iridescent imitates natural surfaces that shift colour quietly. If you want the louder version, [holographic gradients](https://gradiently.design/guide/holographic-gradients) covers it in full.

| Quality | Iridescent | Holographic |
| --- | --- | --- |
| Saturation | Low, pale tints | High, full rainbow |
| Base | Near white or near black | Often silver or the colours themselves |
| Transitions | Long and soft | Short, often banded |
| Real world reference | Pearl, shell, soap bubble, oil on water | Foil, stickers, security holograms |
| Mood | Calm, refined, skincare, bridal | Playful, loud, Y2K, music |

The quickest test: squint. If you still see distinct hues, it is holographic. If you see a soft pale surface with a hint of colour, it is iridescent.

## How to build an iridescent gradient from scratch

1. **Choose the base** Light iridescence starts from white or a faintly warm off white such as `#fbf9f6`. Dark iridescence starts from a blue black such as `#0d0f1a`. The base should cover a third or more of the surface.
2. **Pick three to five neighbouring tints** Walk round the colour wheel in small steps: lilac to sky to mint to cream to blush. Keep them at similar lightness, so none jumps forward.
3. **Lower the saturation** If a tint looks like a colour you could name from across a room, it is too strong. For light versions, aim for tints that are mostly white with a trace of hue.
4. **Add one highlight** A small white radial spot, offset towards a corner, tells the eye where the light comes from. One is enough; two start to look like a glossy button.
5. **Finish with fine grain** Pale blends band easily on screens. A little noise breaks up the steps, which [gradient banding](https://gradiently.design/guide/gradient-banding) explains with the fix.

The step that matters most is the third. Most iridescent designs that fail are simply too colourful. Real pearl is overwhelmingly white; the colour is something you notice second.

- Shell white: #fbf9f6
- Lilac sheen: #ece6f6
- Mint sheen: #dff3f4
- Sky sheen: #e4ecf7
- Blush sheen: #fbe7f0
- Cream sheen: #fff6e0
- Graphite ink: #3d3a4a

A working iridescent colour palette: a base, five sheens and one dark ink for type. The ink is what gives the pale colours something to sit against.

## Iridescent CSS with a colour shift on hover

On the web you can make the sheen move when someone points at it, which is the one thing a printed pearl does that a flat image cannot. Registering the angle with `@property` lets the browser animate it smoothly; browsers without support simply show the resting state. The [MDN page on @property](https://developer.mozilla.org/en-US/docs/Web/CSS/@property) has the details.

```css
@property --sheen {
  syntax: '<angle>';
  inherits: false;
  initial-value: 120deg;
}

.pearl {
  background:
    radial-gradient(ellipse at 25% 15%, rgb(255 255 255 / 0.9), transparent 45%),
    linear-gradient(var(--sheen), #f6f1ff, #dff3f4 30%, #fbe7f0 55%, #fff6e0 75%, #e9e4ff);
  color: #3d3a4a;
  transition: --sheen 700ms ease;
}

.pearl:hover {
  --sheen: 210deg;
}

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

A pearl card whose sheen turns when hovered. The white radial layer is the highlight; the linear layer carries the tints.

Rotating the angle is gentler than sliding the background position, because the tints stay in place and only their direction changes, which is closer to how a real surface catches light. For blends that mix more evenly, defining stops in OKLCH helps; see [OKLCH gradients in CSS](https://gradiently.design/guide/css-gradient-oklch).

## Putting words on an iridescent background

Pale iridescence is a hard surface for type. White text vanishes on it, and dark text works only if the area behind it is even. Use a dark ink taken from the palette rather than pure black, keep the words over the calmest part of the blend, and leave the busiest shift in a corner. The general rules are in [text on a gradient background](https://gradiently.design/guide/text-on-gradient).

A pale pearly product launch post where the headline runs across the brightest part of the sheen and is faint

Words laid straight over the shifting tints lose their edges where the sheen is brightest.

The same pearly product launch post with an even area behind the headline and the colour shift moved to a corner

With the calmest region behind the headline and the colour shift pushed aside, the same post reads at a glance.

This is where a Gradiently Mark earns its keep. A Mark knows where the words are: it moves its calmest region behind them and Auto ink picks light or dark type line by line from the Mark's own palette, so a soft pearly surface stays readable at every size without boxes or shadows.

## Where iridescence works best

- **Skincare and beauty**: launch posts, shade cards and packaging stickers. It suggests dew and light on skin; see [skincare brand design](https://gradiently.design/guide/skincare-brand-design).
- **Bridal and wedding**: invitations and save the dates on pearl, with graphite ink and generous margins.
- **Jewellery**: a pearl or opal ground behind product photos picks up the stones without competing with them.
- **Music and nightlife**: the dark oil slick blend on a 1080×1920 story, with one line of white type over the darkest area.
- **Tech product pages**: a pearl hero with the hover sheen above, kept behind a short headline.

Iridescence pairs well with clean serif or light sans type and wide spacing. It clashes with heavy drop shadows, thick outlines and saturated accents. If you want metal instead of pearl, the [chrome effect](https://gradiently.design/guide/chrome-effect) is the harder, colder sibling.

## FAQ

### What colours make an iridescent gradient?

Pale lilac, mint, sky blue, blush pink and cream over a white base, plus a soft white highlight. For a dark version, use deep teal, violet and bronze on a blue black.

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

Iridescent is soft and pale, like a pearl or soap bubble. Holographic runs the full rainbow at high saturation, like foil stickers.

### How do I make an iridescent effect in CSS?

Layer a white radial highlight over a linear gradient of pale neighbouring tints. To make it shift, register an angle with `@property` and change it on hover.

### Is pearlescent the same as iridescent?

Pearlescent is a kind of iridescence: mostly white with a faint colour shift. Iridescent also covers darker shifts such as oil on water or a beetle shell.

### What font colour works on an iridescent background?

A dark ink from the palette, such as a graphite with a hint of violet, placed over the calmest area. White type rarely reads on pale iridescence.