Iridescent Glass Panel
A 220 × 150 px frosted glass panel crossed by rainbow reflections: a magenta-cyan-blue-amber conic gradient, blended in screen mode, whose center sits under the pointer and whose angle turns with it — like a soap-bubble film that changes as you move, with a mouse or a finger.
Updated
This effect is part of Effect.Labs — 840 vanilla effects, some free, some premium. Glassmorphism has 47 effects, including 6 free. Explore the category →
3 usage examples
How it works
The .lg-iridescent panel is a pane of glass: 5% white fill, backdrop-filter: blur(14px) (with -webkit-), 15% white border, 16 px corners, overflow: hidden, crosshair cursor. Inside, two position: absolute; inset: 0 layers that let the pointer through. .lg-iridescent-layer carries a conic-gradient(from var(--iri-angle) at var(--iri-x) var(--iri-y), …) that goes round the color wheel — magenta, cyan, blue, amber, back to magenta, each at 25% — in mix-blend-mode: screen at 70% opacity (100% on hover, over 0.3 s). .lg-iridescent-shine adds a 20% white spot centered on the same point. The text (12.8 px, weight 600, white with a shadow) sits on top.
The script listens to pointermove on every [data-iridescent] and writes three variables on it: --iri-x and --iri-y, the pointer position as a percentage of the panel, and --iri-angle, the angle between the panel's center and the pointer (Math.atan2, in degrees). The gradient's center therefore follows the finger and the color wheel turns as you go round the panel. --iri-angle is declared through @property as an <angle>. Measured, pointer 20 px from the bottom-right corner of a 220 × 150 panel: layer at conic-gradient(from 31.4296deg at 90.9091% 86.6667%, …), identical in Chromium 151 and Firefox 153.
Three details in the code make the wheel turn everywhere. The @property --iri-angle declaration says inherits: true: the script writes the angle on the panel, and it is the layer, its child, that uses it; with false, the layer would stay at 0° — measured, 31.43° on the panel against 0° on the layer, and a gradient without “from” where only the center moves. The listener is pointermove, with touch-action: none on the panel: measured in Chromium with touch, a sliding finger turns the wheel (29.5°, center at 64% × 61%). Finally the panel sits in an .lg-iridescent-backdrop setting (sharp discs, hatching), because glass over a flat color has nothing to blur; replace it with your picture.
Accessibility
- Decoration: the reflections carry no information; a screen reader only reads the panel's text. If the panel serves as visual proof (a ticket hologram), also give the proof as text — name, number, “valid” status — readable without moving a finger.
- Text contrast: it varies with the reflection's position, since the color under the text changes. The original shadowed white text holds on a panel over a dark background; on a light background, switch it to a dark color (as the ticket and the dial on this page do) and check contrast at the worst spot, when the reflection's white spot passes underneath.
- Motion: nothing moves on its own; the reflections only move with the pointer, on demand. No
prefers-reduced-motionrule is needed. The 70% to 100% opacity change on hover lasts 0.3 s. - With a finger:
touch-action: nonestops the page from scrolling when the finger starts on the panel. On a 220 × 150 px panel that is not a problem; if you enlarge it to the full width of a phone, leave room around it to scroll. - Keyboard: no keyboard interaction, and none is needed as long as the panel is decorative.
Browser compatibility
CSS: conic-gradient with position and angle in variables, mix-blend-mode: screen, @property, backdrop-filter (and -webkit-), touch-action. JS: pointermove, style.setProperty. Zero dependencies. Measured in Chromium 151 and Firefox 153: same gradient, same angle (31.4296°), no error; touch in Chromium with mobile emulation. Browsers without @property treat --iri-angle as an ordinary variable, which inherits: the effect works there too.
Without conic-gradient (Firefox before 83, Safari before 12.1), the layer has no background: what remains is the glass and the white spot following the pointer. Without backdrop-filter, the panel is translucent with no blur. Without pointer events (Safari before 13), the reflections stay frozen at the center.
The code
HTML structure to paste into your page (the CSS + JS come with Premium):
<div class="demo-preview">
<div class="lg-iridescent-backdrop">
<div class="lg-iridescent" data-iridescent="">
<div class="lg-iridescent-layer"></div>
<div class="lg-iridescent-shine"></div>
<span class="lg-iridescent-text">…</span>
</div>
</div>
</div>The full HTML + CSS + JS of Iridescent Glass Panel, ready to paste — plus all 840 effects. Or $299 once, lifetime access.
Customize
Options passed to the API or data-* attributes:
| Option / property | Default | Effect |
|---|---|---|
Reflection colors and strength (CSS — .lg-iridescent-layer, conic-gradient(…)) |
magenta, cyan, blue, amber, magenta, at 25%; mix-blend-mode: screen; opacity 0.7 then 1 on hover |
On a light background, go up to 40-50% and switch to mix-blend-mode: overlay, otherwise screen washes everything out. For discreet mother-of-pearl, keep 25% and add pastel hues; for a bold hologram, saturated colors. Keep the last color equal to the first to avoid a seam. |
Rotation with the pointer (JS — --iri-angle; CSS — @property --iri-angle) |
angle between the center and the pointer, inherited by the layer | Multiply the angle (l * 2) for a wheel that turns twice as fast. Keep inherits: true in the declaration: with false, the layer never receives the angle and the wheel stops turning. |
White highlight (CSS — .lg-iridescent-shine) |
20% white → transparent at 50% of the radius | Raise to 35% for a strong glint under the finger, or delete the layer to keep only the colors. |
Glass (CSS — .lg-iridescent: backdrop-filter: blur(14px), 5% white fill) |
14 px blur | 5 px keeps what is behind readable (a cover picture); 20 px leaves only colors. The panel can take any shape: border-radius: 50% for a dial, a 120 px badge for a seal. |
Setting behind the glass (CSS — .lg-iridescent-backdrop) |
three sharp discs, hatching, night background | It makes the blur visible in the demo; delete it and set the panel over your picture. |
FAQ
--iri-x, --iri-y), undeclared, inherits like any CSS variable, but an angle declared with inherits: false would stop at the panel — the layer would keep its initial value, 0°, and only the center position would move. Measured with false: 31.43° on the panel, 0° on the layer. With inherits: true, the layer receives the angle. A curiosity: in a browser without @property, the variable is not declared, hence inherited, and the wheel turns either way.touch-action: none keeps the page from scrolling during the gesture. It does not use the phone's tilt: for a hologram that moves when you tilt the device, you would write the same variables from the deviceorientation event, with the permission request iOS Safari requires.
