Iridescence

Color that changes depending on the angle you view it from, like an oil slick, a soap bubble, or a beetle's shell.

oil slick colorssoap bubble colorsiridescensepetrol sheencolors that shift when you movebeetle shell colorsmother of pearl lookpearlescent finish

See it

Live demo coming soon

What it is

Iridescence is color that comes from structure instead of pigment, and there is more than one structure that does it. Thin-film interference is the soap bubble and the petrol slick: light reflects off both the top and the bottom of a film only a few hundred nanometers thick, and because the two reflections travel different distances, some wavelengths cancel and others reinforce. The film does not move when you do; tilting changes the angle light takes through it, so the path length changes and a different set of wavelengths survives. Beetle shells, peacock feathers, and abalone stack many such layers into multilayer structural color, and a CD is different again: its evenly spaced pits are a diffraction grating, fanning the spectrum out by angle rather than by film thickness.

In 3D you get it honestly with a thin-film or multilayer shader that maps view angle and layer thickness to a spectrum. A Fresnel term alone will not do it: Fresnel only says reflections get stronger at glancing angles, so it changes how much you see, not what hue you see. It is a multiplier over a spectral model, not a substitute for one. On a flat page there is no real viewing angle, so you fake the input: drive a hue shift from cursor position, scroll offset, or device tilt, and layer a soft multi-stop gradient over the base surface with mix-blend-mode: overlay or soft-light so the underlying material still shows through.

The mistake everyone makes is reaching for a full-saturation rainbow. That reads as a pride flag or a gaming keyboard, not as a material. Real iridescence is a narrow, biased band (cyan into magenta into gold), it stays desaturated near the base color across most of the surface, and it concentrates at glancing angles, which on a 2D shape means the edges.

Ask AI for it

Give this surface an iridescent, oil-slick finish: layer a soft multi-stop gradient sweeping cyan into magenta into gold over the base color, blended with mix-blend-mode: overlay so the base material still reads through. Keep saturation low in the middle of the shape and let the color concentrate toward the edges, like a glancing-angle reflection. Shift the gradient angle and hue with cursor position so the color moves as the user moves, and avoid an even full-spectrum rainbow.

You might have meant

holographic effectchromatic aberrationgradient mapblend mode

Go deeper