Spotlight Background
Two soft cones of light hang from the top of a dark stage and sweep back and forth, crossing in the middle. Each beam is a conic gradient faded with a mask, rotating from its lamp.
Also known as: spotlight sweep background css, searchlight animation css, stage lights background.
HTML
<div class="bgx-spotlight" aria-hidden="true"><span></span><span></span></div>
CSS
.bgx-spotlight {
--c: var(--bgx-color, #3b82f6);
font-size: var(--bgx-size, 16px);
position: absolute;
inset: 0;
overflow: hidden;
background:
radial-gradient(ellipse 70% 30% at 50% 100%, oklch(from var(--c) 0.3 0.05 calc(h + 0) / 0.6), transparent 70%),
linear-gradient(#030408, #0b0d14);
isolation: isolate;
}
.bgx-spotlight span {
position: absolute;
top: -1em;
left: var(--x);
width: 40em;
height: 160%;
translate: -50% 0;
transform-origin: 50% 0;
background: conic-gradient(from 162deg at 50% 0%, transparent, var(--beam) 12deg 24deg, transparent 36deg);
-webkit-mask-image: linear-gradient(#000 10%, transparent 75%);
mask-image: linear-gradient(#000 10%, transparent 75%);
mix-blend-mode: screen;
animation: bgx-spotlight-sweep var(--t) cubic-bezier(0.45, 0, 0.55, 1) var(--d) infinite alternate;
}
.bgx-spotlight span:nth-child(1) { --x: 30%; --a: -28deg; --b: 30deg; --t: 5s; --d: -1s; --beam: oklch(from var(--c) 0.92 0.06 calc(h + 0) / 0.55); }
.bgx-spotlight span:nth-child(2) { --x: 70%; --a: 28deg; --b: -30deg; --t: 6.2s; --d: -4s; --beam: oklch(from var(--c) 0.86 0.12 calc(h + 60) / 0.5); }
.bgx-spotlight::after {
content: "";
position: absolute;
left: 50%;
top: -3em;
width: 22em;
height: 6em;
translate: -50% 0;
background: radial-gradient(closest-side, oklch(from var(--c) 0.9 0.06 calc(h + 0) / 0.35), transparent);
}
@keyframes bgx-spotlight-sweep {
from { transform: rotate(var(--a)); }
to { transform: rotate(var(--b)); }
}
@media (prefers-reduced-motion: reduce) {
.bgx-spotlight, .bgx-spotlight *, .bgx-spotlight::before, .bgx-spotlight::after, .bgx-spotlight *::before, .bgx-spotlight *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Customizing this snippet
- Color: set
--bgx-coloron the element or a parent. Currently previewing#3b82f6. - Pattern scale: set
--bgx-size. Every other dimension is inem, so the whole thing scales together. Currently previewing16px. - Speed: change the duration on the
transitionoranimationshorthand. Staggered delays are relative, so they keep their rhythm. - Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.