Bokeh Lights Background
Out-of-focus light discs in three hues drift and swell over a dark backdrop, each with the brighter rim of real lens bokeh. The discs are flat radial gradients, so no blur filter is needed.
Also known as: bokeh effect background css, blurred lights background, bokeh css animation.
HTML
<div class="bgx-bokeh-lights" aria-hidden="true"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
CSS
.bgx-bokeh-lights {
--c: var(--bgx-color, #3b82f6);
font-size: var(--bgx-size, 16px);
position: absolute;
inset: 0;
overflow: hidden;
background: radial-gradient(ellipse 90% 90% at 70% 30%, color-mix(in srgb, var(--c) 22%, #0d0f1c), #06070d 75%);}
.bgx-bokeh-lights span {
position: absolute;
top: var(--y);
left: var(--x);
width: var(--d);
height: var(--d);
margin: calc(var(--d) / -2);
border-radius: 50%;
background: radial-gradient(closest-side, color-mix(in srgb, var(--k) 32%, transparent) 74%, color-mix(in srgb, var(--k) 60%, transparent) 91%, transparent);
mix-blend-mode: screen;
opacity: 0.3;
animation:
bgx-bokeh-lights-drift var(--dur) ease-in-out var(--delay) infinite alternate,
bgx-bokeh-lights-glow var(--pulse) ease-in-out var(--delay) infinite alternate;
}
.bgx-bokeh-lights span:nth-child(3n + 1) { --k: var(--c); }
.bgx-bokeh-lights span:nth-child(3n + 2) { --k: oklch(from var(--c) 0.8 0.14 calc(h + 50)); }
.bgx-bokeh-lights span:nth-child(3n) { --k: oklch(from var(--c) 0.86 0.1 calc(h - 45)); }
.bgx-bokeh-lights span:nth-child(1) { --x: 11.8%; --y: 85.4%; --d: 3.09em; --dx: 1em; --dy: 0.87em; --dur: 11.01s; --pulse: 4.76s; --delay: -0.99s; }
.bgx-bokeh-lights span:nth-child(2) { --x: 94.7%; --y: 36.7%; --d: 5.13em; --dx: 1.17em; --dy: 0.02em; --dur: 11.05s; --pulse: 4.56s; --delay: -7.68s; }
.bgx-bokeh-lights span:nth-child(3) { --x: 67.2%; --y: 8.1%; --d: 7.83em; --dx: 0.16em; --dy: 0.34em; --dur: 8.88s; --pulse: 2.99s; --delay: -0.78s; }
.bgx-bokeh-lights span:nth-child(4) { --x: 90.2%; --y: 8.1%; --d: 5.03em; --dx: -2.46em; --dy: -1.57em; --dur: 8.92s; --pulse: 5s; --delay: -2.89s; }
.bgx-bokeh-lights span:nth-child(5) { --x: 80.7%; --y: 79.8%; --d: 4.02em; --dx: 1.89em; --dy: -0.72em; --dur: 13.57s; --pulse: 3.84s; --delay: -0.24s; }
.bgx-bokeh-lights span:nth-child(6) { --x: 45.4%; --y: 17.8%; --d: 3.13em; --dx: -0.04em; --dy: -1.29em; --dur: 12.52s; --pulse: 3.76s; --delay: -7.38s; }
.bgx-bokeh-lights span:nth-child(7) { --x: 17.9%; --y: 19.2%; --d: 3.21em; --dx: -2.87em; --dy: -1.37em; --dur: 10.1s; --pulse: 3.08s; --delay: -3.51s; }
.bgx-bokeh-lights span:nth-child(8) { --x: 74.7%; --y: 63.2%; --d: 6.12em; --dx: 1.74em; --dy: 1.13em; --dur: 8.8s; --pulse: 3.93s; --delay: -8.39s; }
.bgx-bokeh-lights span:nth-child(9) { --x: 51.9%; --y: 76.7%; --d: 6.63em; --dx: 0.62em; --dy: 1.83em; --dur: 11.23s; --pulse: 3.81s; --delay: -6.19s; }
.bgx-bokeh-lights span:nth-child(10) { --x: 60.2%; --y: 23%; --d: 6.69em; --dx: 2.27em; --dy: -1.39em; --dur: 8.01s; --pulse: 3.27s; --delay: -2.76s; }
.bgx-bokeh-lights span:nth-child(11) { --x: 24.8%; --y: 76.7%; --d: 6.06em; --dx: 2.36em; --dy: 0.63em; --dur: 8.35s; --pulse: 4.08s; --delay: -8.19s; }
.bgx-bokeh-lights span:nth-child(12) { --x: 38.5%; --y: 12.1%; --d: 6.7em; --dx: -1.32em; --dy: -0.08em; --dur: 13.62s; --pulse: 3.43s; --delay: -1.82s; }
.bgx-bokeh-lights span:nth-child(13) { --x: 30.4%; --y: 11.8%; --d: 7.27em; --dx: 1.03em; --dy: 0.54em; --dur: 10.05s; --pulse: 4.44s; --delay: -6.28s; }
.bgx-bokeh-lights span:nth-child(14) { --x: 3.3%; --y: 39.9%; --d: 2.88em; --dx: -1.25em; --dy: -1.07em; --dur: 12.01s; --pulse: 3.47s; --delay: -9.93s; }
@keyframes bgx-bokeh-lights-drift {
from { translate: 0 0; }
to { translate: var(--dx) var(--dy); }
}
@keyframes bgx-bokeh-lights-glow {
from { opacity: 0.25; transform: scale(0.88); }
to { opacity: 0.95; transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
.bgx-bokeh-lights, .bgx-bokeh-lights *, .bgx-bokeh-lights::before, .bgx-bokeh-lights::after, .bgx-bokeh-lights *::before, .bgx-bokeh-lights *::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.