Bokeh light orbs
Soft out of focus discs of light float, grow and fade like lights blurred by a camera lens.
Settings
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 BackgroundsWhere 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.