---
name: spotlight-background
description: Use when you want "Dramatic, premium, focused" - Creates a focused light beam or glow behind important content.
---

# Spotlight Background

> **Category:** Background  -  **Personality:** Dramatic, premium, focused
>
> **Best use:** Hero sections, pricing, product reveals
>
> **Ratings:** Professional 5/5 - Casual 3/5 - Exotic 4/5 - Visual impact 4/5 - Difficulty 2/5 - Performance cost 2/5

## What it is

A single, focused theatrical light beam falls from above onto a dark stage, picking one headline or product out of the gloom like a spotlight on a stage. It is built from a **clip-path cone** filled with a top-to-bottom fading gradient (the volumetric falloff), blurred for soft edges and composited with `mix-blend-mode: screen` so it *adds* light to whatever is behind it. Unlike an ambient radial glow — which spreads a diffuse pool of colour — this is one directional shaft with a clear source, a bright core and a pool where it lands. Use it for a dramatic reveal: a product launch, a single hero line, or the "featured" pricing tier.

## Dependencies / CDN

None - pure CSS for the effect; a few lines of vanilla JS for the optional pointer-aim. The demo loads two display/body fonts (optional):

```html
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600&family=Playfair+Display:ital,wght@0,700;0,800;0,900;1,700;1,800&display=swap" rel="stylesheet">
```

## HTML

A dark stage, a pivoting "light rig" (lamp + two beams + floor pool), and the content it lights:

```html
<div class="sb-stage" id="sbStage">
  <div class="sb-vignette" aria-hidden="true"></div>

  <!-- the light rig pivots about the lamp to sway / be aimed -->
  <div class="sb-rig" id="sbRig" aria-hidden="true">
    <div class="sb-fixture"></div>            <!-- the lamp housing on the ceiling -->
    <div class="sb-beam sb-soft"></div>       <!-- wide, dim halo -->
    <div class="sb-beam sb-core"></div>       <!-- narrow, bright core -->
    <div class="sb-lamp"></div>               <!-- the glowing bulb -->
    <div class="sb-pool"></div>               <!-- light pool on the floor -->
  </div>

  <div class="sb-content">
    <p class="sb-kicker">Studio Series — The 2026 Reveal</p>
    <h2 class="sb-title">Meet <em>Eclipse</em>.</h2>
    <p class="sb-sub">Reference-grade sound, sculpted for the dark.</p>
    <button class="sb-btn sb-primary" type="button">Reserve — $349</button>
  </div>
</div>
```

## CSS

```css
/* 1) A DARK stage — the beam only reads against darkness */
.sb-stage{
  position:relative; overflow:hidden; isolation:isolate;   /* contain the blend + blur */
  min-height:clamp(560px,78vh,680px); border-radius:26px;
  display:flex; align-items:center; justify-content:center; padding:64px 26px;
  background:radial-gradient(118% 82% at 50% -10%,#17151f,#0b0b12 46%,#060609);
  box-shadow:inset 0 0 150px 30px rgba(0,0,0,.6);
}
.sb-vignette{position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(105% 105% at 50% 36%,transparent 52%,rgba(0,0,0,.55))}

/* 2) THE BEAM — a clip-path cone, fading gradient, blurred, added with `screen` */
.sb-rig{position:absolute; inset:0; z-index:1; pointer-events:none;
  transform-origin:50% 0%;                       /* pivot at the lamp, up top */
  animation:sb-sway 11s ease-in-out infinite}
.sb-stage.is-aiming .sb-rig{animation:none}      /* JS takes over while aiming */

.sb-beam{position:absolute; top:-3%; left:50%; transform:translateX(-50%);
  mix-blend-mode:screen}                          /* ADD light to the backdrop */
.sb-soft{width:80%; height:130%; filter:blur(34px); opacity:.92;
  clip-path:polygon(46% 0,54% 0,100% 100%,0 100%);          /* narrow top -> wide base */
  background:linear-gradient(180deg,rgba(255,243,212,.34),rgba(255,238,198,.10) 46%,rgba(255,236,194,0) 75%)}
.sb-core{width:52%; height:122%; filter:blur(13px);
  clip-path:polygon(47.5% 0,52.5% 0,77% 100%,23% 100%);
  background:linear-gradient(180deg,rgba(255,248,228,.72),rgba(255,242,210,.20) 42%,rgba(255,240,205,0) 70%);
  animation:sb-breathe 6.5s ease-in-out infinite}

/* 3) The source flare + the pool where the beam lands (grounds it) */
.sb-lamp{position:absolute; top:-2%; left:50%; width:130px; height:130px;
  transform:translate(-50%,-50%); filter:blur(3px); mix-blend-mode:screen;
  background:radial-gradient(circle,#fff9ec,rgba(255,243,214,.55) 26%,rgba(255,238,200,0) 68%)}
.sb-pool{position:absolute; left:50%; bottom:7%; width:60%; height:24%; transform:translateX(-50%);
  filter:blur(20px); mix-blend-mode:screen;
  background:radial-gradient(ellipse,rgba(255,240,205,.26),rgba(255,236,196,.06) 46%,transparent 72%)}

.sb-content{position:relative; z-index:2; text-align:center; max-width:720px}
.sb-title{font-family:"Playfair Display",serif; font-weight:800; font-size:clamp(46px,9vw,104px);
  line-height:.98; background:linear-gradient(180deg,#fffaf0,#cfc6b4);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 34px rgba(255,240,205,.18))}   /* drop-shadow glows the gradient text */
.sb-title em{font-style:italic; background:linear-gradient(180deg,#ffe7b3,#eeae52);
  -webkit-background-clip:text; background-clip:text; color:transparent}

@keyframes sb-sway{0%,100%{transform:rotate(-3.4deg)} 50%{transform:rotate(3.4deg)}}
@keyframes sb-breathe{0%,100%{opacity:.82} 50%{opacity:1}}

/* 4) Respect reduced motion -> a still, centred beam */
@media (prefers-reduced-motion:reduce){
  .sb-rig{animation:none!important; transform:none!important}
  .sb-core{animation:none!important}
}
```

## JavaScript

Optional. Let the visitor *aim* the spotlight: map pointer-X to a small rotation of the rig (which pivots at the lamp), ease it with `requestAnimationFrame`, and hand control back to the CSS sway on `pointerleave`. Skipped entirely under reduced motion.

```js
(function(){
  var stage=document.getElementById('sbStage'), rig=document.getElementById('sbRig');
  if(!stage||!rig) return;
  if(matchMedia('(prefers-reduced-motion: reduce)').matches) return;   // static beam
  var MAX=7, raf=0, target=0, cur=0;
  function tick(){
    cur+=(target-cur)*0.12;
    rig.style.transform='rotate('+cur.toFixed(2)+'deg)';
    if(Math.abs(target-cur)>0.04){ raf=requestAnimationFrame(tick); } else { raf=0; }
  }
  stage.addEventListener('pointermove',function(e){
    var r=stage.getBoundingClientRect();
    var nx=((e.clientX-r.left)/r.width-0.5)*2;            // -1 .. 1
    target=Math.max(-1,Math.min(1,nx))*MAX;              // degrees
    stage.classList.add('is-aiming');                    // pause CSS sway
    if(!raf) raf=requestAnimationFrame(tick);
  });
  stage.addEventListener('pointerleave',function(){
    stage.classList.remove('is-aiming');                 // resume CSS sway
    if(raf){ cancelAnimationFrame(raf); raf=0; }
    rig.style.transform='';                              // give the animation control back
  });
})();
```

## How it works

- **The cone is a `clip-path` polygon** — narrow at the top (`46% 0, 54% 0`), full-width at the bottom (`100% 100%, 0 100%`). That trapezoid shape *is* the beam silhouette.
- **A vertical `linear-gradient`** fades the fill from bright at the lamp to fully transparent before the base — this is the *volumetric falloff* that makes it read as light, not a solid wedge.
- **`mix-blend-mode: screen`** makes the beam **add** its brightness to the dark stage (and to anything it overlaps) instead of painting an opaque shape — exactly how real light behaves. `isolation:isolate` on the stage keeps that blending contained.
- **`filter: blur()`** dissolves the hard polygon edges into soft, hazy light. Two stacked beams (a wide dim `soft` + a tight bright `core`) give the shaft depth.
- **The pivot** lives on the wrapper (`transform-origin:50% 0%` at the lamp), so rotating the rig sweeps the beam like a real swinging stage light — driven by the `sb-sway` keyframes, or by the pointer.

## Customization

- **Beam colour / mood:** warm `rgba(255,243,212,…)` = theatrical/gold; swap to cool `rgba(200,225,255,…)` for a clinical studio look, or a brand hue for a coloured gel.
- **Focus:** tighten the apex (`48% 0, 52% 0`) and drop the blur for a sharp interrogation-style beam; widen it and raise the blur for a soft wash.
- **Intensity:** push the top gradient stop toward `1` for a blown-out hot beam; lower it for a subtle hint.
- **Drama of the sweep:** raise the `sb-sway` angle (±3.4deg) or the JS `MAX` for a livelier searchlight; set both to 0 for a fixed beam.
- **Pricing variant:** drop three plan cards on the stage and let the beam land on the middle "recommended" one — the others sit in shadow.

## Accessibility & performance

- **Reduced motion:** the CSS disables the sway/breathe and the JS bails out, leaving a still, centred beam. Always provide this.
- **Contrast:** light text over the dark stage is high-contrast by default; just keep body copy off the very darkest corners (the vignette) so it stays legible.
- **Cheap to run:** it is a handful of static, GPU-composited layers. Animate only `transform`/`opacity` (as here) — never animate `filter: blur()` or `clip-path`, which force expensive repaints.
- The decorative rig is `aria-hidden="true"` and `pointer-events:none`, so it never interferes with screen readers or clicks.

## Gotchas

- **Nothing happens on a light background.** `screen` blend only *adds* light — the stage must be dark for the beam to show. On white it disappears.
- **Clip your container.** The blurred beams overflow the stage; without `overflow:hidden` on `.sb-stage` they spill onto the page. Never size them with `100vw` — that triggers a horizontal scrollbar.
- **`isolation:isolate` is required** on the stage so `mix-blend-mode` composites only against the stage, not whatever sits behind it on the page.
- **Glow on gradient text:** `text-shadow` is unreliable on `background-clip:text` elements — use `filter: drop-shadow()` instead (it glows the actual painted glyphs).
- **Pivot placement:** keep `transform-origin` on the lamp (top-centre). Put it in the middle and the beam scissors instead of sweeping like a hinged light.