Rainbow Refraction
A frosted glass pane that blurs whatever is behind it, with a conic rainbow slowly spinning inside, like light through a prism.
Updated
This effect is part of Effect.Labs — 840 vanilla effects, some free, some premium. Distortion has 31 effects, including 5 free. Explore the category →
3 usage examples
How it works
The .rfr-glass pane (250×150 px, 20 px corners) has a 10% white fill and a 20% white border. backdrop-filter: blur(10px) blurs everything behind it on the page: a photo, an illustration, lights.
Inside, a square ::before pseudo-element, twice as wide as the pane and centred on it, carries a conic gradient running round the colour wheel (red, orange, yellow, green, cyan, blue, violet, pink). At 30% opacity it makes a full turn in 6 seconds (rfrSpin); the pane clips whatever sticks out.
This disc is drawn above the content, which picks up its tints. To keep text or a button crisp, give your content position: relative and z-index: 1. The disc lets clicks through. Repair: it used to be 150% of the width and height and left two dark corners as it turned; it is now square and covers the whole pane.
Accessibility
- Real text: "REFRACT" and any content placed in the pane stay HTML text that reads normally.
- Reduced motion: with
prefers-reduced-motion: reducethe rainbow freezes; the pane keeps its colours and blur (measured: 2 looping animations → 0 for two copies). - Legibility: under the 30% disc, bold white text stays readable; for body text or a stronger opacity, lift the content above the disc (
z-index: 1). - No interaction of its own: the pane reacts to neither hover nor keyboard; links and buttons placed inside work normally, keyboard included.
Browser compatibility
CSS only, no JavaScript. Measured in Chromium 151, Firefox 153 and Playwright's WebKit 26.5: 0 errors, corners covered, two independent copies, nothing overflowing at 390 px, disc stopped under reduced motion. Minimum versions come from aspect-ratio (square disc) and, for Firefox, from backdrop-filter (the -webkit- prefix is included for Safari).
Without backdrop-filter, whatever is behind the pane stays sharp under its white veil; the rainbow still spins.
The code
HTML structure to paste into your page (the CSS + JS come with your purchase):
<div class="fx-0267-root">
<div class="rfr-glass">REFRACT</div>
</div>One-time payment, no subscription — the code is yours forever
Customize
Options passed to the API or data-* attributes:
| Option / property | Default | Effect |
|---|---|---|
--rfr-w and --rfr-h |
250px and 150px |
Pane size; 100% to follow the container (never wider than it). The disc covers the pane as long as its height stays under 1.7 times its width. |
--rfr-radius |
20px |
Corner rounding. |
--rfr-glass and --rfr-edge |
white at 10% and white at 20% | Pane veil and border colour. |
--rfr-blur |
10px |
Strength of the blur applied to what lies behind the pane. |
--rfr-rainbow |
.3 |
Rainbow opacity. |
--rfr-speed |
6s |
Length of one full turn of the disc. |
--rfr-bg and --rfr-min-h |
#0a0a0f and 300px |
Root background and minimum height; transparent and 0 so the glass blurs your own page. |
FAQ
--rfr-bg: transparent and place the pane over an image or a decor to see the glass effect.position: relative and z-index: 1: it then sits above the rainbow instead of being tinted by it.conic-gradient of .rfr-glass::before. You can replace them in the CSS, keeping the same colour at the start and the end to avoid a seam.
