beam spotlight conic-gradient property rotation dark hero background dark hero section with subtle rotating light sweep pricing plan highlight with beam accent CTA section background with premium atmosphere dashboard dark panel background dark sections feel flat without a light accent SVG/canvas-based beams are heavy and not SSR-safe want an atmospheric sweep without JavaScript
Radial Beam
Fetch snippet JSON:
curl https://webspire.de/snippets/decorative/radial-beam.json Preview
Background
Customize
Quick Start
<section class="radial-beam min-h-[40vh] bg-slate-950 text-white flex items-center justify-center"><h1>Pricing</h1></section>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- A11y
- prefers-reduced-motion
- Size
- 948 bytes · 44 lines
- Custom Properties
-
--beam-angle--beam-color--beam-spread--beam-duration - Classes
-
.radial-beam
beam spotlight conic-gradient property rotation dark hero background
The beam originates from the bottom center (at 50% 110%) and sweeps the element clockwise. The --beam-spread controls the angle width of the beam; --beam-color controls the tint. Falls back to a static radial gradient for reduced-motion.
Dark hero section
<section class="radial-beam relative min-h-screen bg-slate-950 text-white flex items-center justify-center"
style="--beam-color: oklch(0.65 0.2 270 / 0.1); --beam-duration: 10s;">
<div class="relative z-10 text-center">
<h1 class="text-6xl font-black">Ship faster.</h1>
<p class="mt-4 text-lg text-white/60">The design system for ambitious teams.</p>
</div>
</section>Customize beam tint
/* Purple beam */
.radial-beam { --beam-color: oklch(0.65 0.22 280 / 0.15); }
/* Gold beam */
.radial-beam { --beam-color: oklch(0.78 0.18 75 / 0.12); }
/* Cyan beam */
.radial-beam { --beam-color: oklch(0.72 0.2 200 / 0.14); }