HTML + CSSArrière-plans

Sphères lumineuses bokeh

Des disques de lumière flous flottent, grandissent et s'éteignent comme des lumières vues à travers un objectif.

Réglages

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 pour l’IA

Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.

Plus dans Arrière-plans

Voir tout : Arrière-plans

Où l’utiliser

L'atmosphère rêveuse d'une photo de nuit prise avec un objectif lumineux. Deux douzaines de cercles de lumière dans tes trois couleurs ont des tailles et des flous différents, chacun avec un bord plus brillant comme un vrai bokeh. Ils dérivent lentement, grossissent et faiblissent à leur propre rythme et se mélangent selon le thème, lumineux sur fond sombre et teintés sur fond clair.

C'est du HTML et du CSS pur, presque sans coût. La densité change la taille des sphères, la vitesse leur dérive, et en mouvement réduit elles restent immobiles. À utiliser pour des événements, des invitations, des portfolios photo ou des campagnes festives.