Iridescent gradients: pearly colour shifts with codes

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.

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 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 covers it in full.

How to build an iridescent gradient from scratch

1. 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. 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. 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. 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. 5

   Finish with fine grain

   Pale blends band easily on screens. A little noise breaks up the steps, which 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.

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 has the details.

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

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.

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.

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.
• 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 is the harder, colder sibling.