The code

Plain HTML and CSS with no dependencies. Copy a single file, or choose "Full file" for a complete page you can save as index.html and open in a browser.

<div class="beam-wrap">
  <div class="beam"></div>
  <div class="panel">
    <h1>Rotating Beam</h1>
    <p>A blurred conic gradient, turning slowly.</p>
  </div>
</div>

The AI prompt

Paste this into an AI coding tool to generate the same background, then ask it to adapt the colours, text or framework to your project.

Create a dark background with a slowly rotating light beam, using only HTML and CSS.

Requirements:
- Full-viewport wrapper, background #06070d, overflow hidden, content centred.
- A "beam" element, absolutely positioned and very large (140vmax square), whose background is a conic-gradient with two coloured wedges - indigo rgba(37,6,173,0.7) around 60deg and orange rgba(255,123,0,0.55) around 240deg - and transparent everywhere else.
- Blur the beam heavily (filter: blur(60px)) and rotate it 360 degrees over 16s, linear, infinite.
- In front, a centred glass panel: semi-transparent dark background, 1px light border, 20px radius, backdrop-filter blur, containing a white heading and subtitle.
- Stop the rotation under prefers-reduced-motion.

Return a single HTML file with a <style> block.

How to build it, step by step

1. 1

   Create a square element much larger than the screen (140vmax) so its corners never show while it rotates.

2. 2

   Paint it with a conic-gradient that is transparent except for two coloured wedges on opposite sides.

3. 3

   Blur it heavily so the wedges become soft beams of light.

4. 4

   Rotate the element with a simple 360-degree keyframe animation.

5. 5

   Place a semi-transparent panel with backdrop-filter on top so the light shows through as a glow.

Customisation tips

• Slow the rotation to 30s for a calmer, more premium feel.
• Use a single wedge instead of two for a lighthouse-style sweep.
• Shrink the beam and place it inside a card with overflow: hidden to make an animated card border glow.

More backgrounds