HTML + CSSBackgrounds

Bokeh light orbs

Soft out of focus discs of light float, grow and fade like lights blurred by a camera lens.

Settings

1x
1x
1

Code

<div class="pt-bokeh"><i style="--x:64.6%;--y:92.5%;--s:3.0em;--c:var(--c1);--b:2.6px;--tx:3.1em;--ty:-2.8em;--du:14.0;--dl:-9.1"></i><i style="--x:97.1%;--y:50.5%;--s:9.0em;--c:var(--c2);--b:1.8px;--tx:6.4em;--ty:-1.1em;--du:12.6;--dl:-9.7"></i><i style="--x:96.9%;--y:73.8%;--s:7.0em;--c:var(--c3);--b:2.6px;--tx:5.7em;--ty:-1.9em;--du:11.4;--dl:-2.2"></i><i style="--x:39.1%;--y:0.2%;--s:3.0em;--c:var(--c1);--b:2.4px;--tx:-4.3em;--ty:1.7em;--du:17.4;--dl:-14.2"></i><i style="--x:13.8%;--y:53.4%;--s:10.4em;--c:var(--c2);--b:1.3px;--tx:2.7em;--ty:2.7em;--du:11.8;--dl:-5.9"></i><i style="--x:78.9%;--y:58.7%;--s:6.8em;--c:var(--c3);--b:2.8px;--tx:6.2em;--ty:-0.8em;--du:15.6;--dl:-0.0"></i><i style="--x:92.9%;--y:42.1%;--s:3.8em;--c:var(--c1);--b:0.5px;--tx:-5.6em;--ty:-1.6em;--du:13.2;--dl:-4.3"></i><i style="--x:63.9%;--y:57.5%;--s:8.8em;--c:var(--c2);--b:1.6px;--tx:-6.1em;--ty:-0.8em;--du:13.1;--dl:-3.9"></i><i style="--x:92.0%;--y:35.9%;--s:8.9em;--c:var(--c3);--b:1.9px;--tx:6.7em;--ty:-4.8em;--du:19.1;--dl:-18.9"></i><i style="--x:77.3%;--y:7.6%;--s:4.8em;--c:var(--c1);--b:1.4px;--tx:-3.2em;--ty:3.0em;--du:18.1;--dl:-0.5"></i><i style="--x:41.3%;--y:90.0%;--s:7.7em;--c:var(--c2);--b:1.7px;--tx:-2.1em;--ty:-3.6em;--du:12.1;--dl:-10.4"></i><i style="--x:6.3%;--y:96.4%;--s:11.9em;--c:var(--c3);--b:0.4px;--tx:-2.5em;--ty:-1.3em;--du:10.2;--dl:-10.2"></i><i style="--x:0.2%;--y:80.0%;--s:9.4em;--c:var(--c1);--b:2.9px;--tx:-5.3em;--ty:-0.3em;--du:19.6;--dl:-12.4"></i><i style="--x:86.3%;--y:85.9%;--s:12.0em;--c:var(--c2);--b:2.7px;--tx:7.4em;--ty:3.4em;--du:19.4;--dl:-8.8"></i><i style="--x:24.6%;--y:89.3%;--s:6.8em;--c:var(--c3);--b:0.5px;--tx:0.5em;--ty:0.8em;--du:10.9;--dl:-4.3"></i><i style="--x:7.8%;--y:77.2%;--s:6.3em;--c:var(--c1);--b:2.1px;--tx:-0.7em;--ty:-1.1em;--du:10.7;--dl:-2.5"></i><i style="--x:6.2%;--y:95.4%;--s:9.3em;--c:var(--c2);--b:2.7px;--tx:3.4em;--ty:-4.7em;--du:12.1;--dl:-1.0"></i><i style="--x:26.7%;--y:98.5%;--s:11.9em;--c:var(--c3);--b:1.0px;--tx:5.5em;--ty:-0.4em;--du:19.0;--dl:-16.2"></i><i style="--x:68.7%;--y:68.7%;--s:8.1em;--c:var(--c1);--b:1.7px;--tx:3.2em;--ty:-4.4em;--du:16.5;--dl:-16.3"></i><i style="--x:30.0%;--y:36.1%;--s:5.5em;--c:var(--c2);--b:0.9px;--tx:6.9em;--ty:-3.4em;--du:11.3;--dl:-10.0"></i><i style="--x:12.2%;--y:28.5%;--s:7.0em;--c:var(--c3);--b:2.2px;--tx:-0.9em;--ty:-4.1em;--du:13.6;--dl:-9.5"></i><i style="--x:41.1%;--y:2.7%;--s:8.7em;--c:var(--c1);--b:1.2px;--tx:-4.5em;--ty:3.5em;--du:17.0;--dl:-8.5"></i><i style="--x:36.2%;--y:83.8%;--s:8.2em;--c:var(--c2);--b:0.3px;--tx:4.2em;--ty:-4.7em;--du:15.2;--dl:-3.4"></i><i style="--x:66.9%;--y:63.2%;--s:11.5em;--c:var(--c3);--b:1.5px;--tx:-1.9em;--ty:-2.5em;--du:16.2;--dl:-2.5"></i></div>

Prompt for AI

Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.

More in Backgrounds

See all Backgrounds

Where to use it

The dreamy look of a fast lens shot at night. Two dozen circles of light in your three colors sit at different sizes and blur levels, each with a brighter rim like real bokeh. They drift slowly in their own directions, swell and dim on separate timings, and overlap with the theme blend so they glow on dark and tint on light.

It is pure HTML and CSS, so it costs almost nothing to run. Density scales the orbs, speed changes their drift, and reduced motion leaves them still. Use it behind event pages, invitations, photography portfolios or holiday campaigns.