About this set
Six tiles that use newer CSS for jobs that used to need JavaScript or several hand-picked colours. Conic rays is a repeating-conic-gradient whose start angle, –bp-angle, is registered with @property, so the browser can animate it smoothly; the animation turns exactly one ray pair per loop, so it never jumps. Its two ray colours are mixed from –bp-color. Tinted grid derives its ground, lines, nodes and corner glow from a single –bp-color with color-mix(), shown in teal and rose from the same class. light-dark() dots is one rule that follows color-scheme, shown forced light and forced dark side by side. Mask-image fade dissolves a grid toward the bottom with a radial mask, with –bp-fade setting where it disappears. Container query density makes the dots bigger and sparser as their container gets wider, shown in a narrow and a wide container. Each feature has a fallback: color-mix() and light-dark() sit behind @supports with plain colours otherwise, and without @property the rays stand still. A checkbox pauses the rays through :has(), and reduced motion stops them.
What’s included
- @property animates the conic angle smoothly and seamlessly
- color-mix() builds a full palette from one --bp-color
- light-dark() follows color-scheme with no media query
- mask-image fade and container query density
- @supports fallbacks, a pause checkbox and a reduced-motion stop
Accessibility
The patterns are decorative and need no alt text. The rays stop under prefers-reduced-motion, and a labelled Pause the conic rays checkbox freezes them, with a 2px outline on keyboard focus. Name labels are opaque white chips with text above 4.5:1 on every tile.
Customise it
Set --bp-color on the rays or the tinted grid to re-theme everything at once, --bp-size and --bp-speed for the rays, --bp-bg-light, --bp-bg-dark, --bp-ink-light and --bp-ink-dark for light-dark(), and --bp-fade for the mask. In Bootstrap the light and dark halves use data-bs-theme; in Tailwind density is set with @min-[160px]: container variants.
