Fond de blobs gooey
Des gouttes de couleur tournent, fusionnent et se séparent comme un liquide. Un fond plein écran en HTML et CSS purs.
Réglages
Code
<div class="pt-goo"><svg width="0" height="0" style="position:absolute"><filter id="pt-goo-f"><feGaussianBlur in="SourceGraphic" stdDeviation="22"/><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 30 -13"/></filter></svg><b><i style="--cc:var(--c1);--z:12.0cqmin;--r:21.3cqmin;--t:16.5s;--wx:-7.4cqmin;--wy:-19.1cqmin"></i><i style="--cc:var(--c2);--z:22.3cqmin;--r:34.2cqmin;--t:17.8s;--wx:-7.8cqmin;--wy:18.9cqmin"></i><i style="--cc:var(--c3);--z:18.4cqmin;--r:43.9cqmin;--t:27.8s;--wx:6.5cqmin;--wy:-15.3cqmin"></i><i style="--cc:var(--c1);--z:21.4cqmin;--r:35.6cqmin;--t:22.3s;--wx:0.9cqmin;--wy:-14.1cqmin"></i><i style="--cc:var(--c2);--z:13.8cqmin;--r:40.9cqmin;--t:18.9s;--wx:5.7cqmin;--wy:-13.8cqmin"></i><i style="--cc:var(--c3);--z:18.9cqmin;--r:20.1cqmin;--t:18.9s;--wx:-18.7cqmin;--wy:19.7cqmin"></i><i style="--cc:var(--c1);--z:13.1cqmin;--r:35.9cqmin;--t:16.9s;--wx:6.2cqmin;--wy:7.1cqmin"></i><i style="--cc:var(--c2);--z:15.3cqmin;--r:36.5cqmin;--t:17.4s;--wx:-7.6cqmin;--wy:-14.8cqmin"></i><i style="--cc:var(--c3);--z:12.3cqmin;--r:35.1cqmin;--t:23.0s;--wx:-19.7cqmin;--wy:-13.3cqmin"></i></b></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
Où l’utiliser
Un fond de blobs gooey place quelque chose de doux et vivant derrière le titre d’une section d’accueil : un studio créatif, une marque de confiserie ou de boissons, une appli de musique, le lancement d’un produit décalé. Neuf gouttes en trois couleurs dérivent et fondent les unes dans les autres, tout en CSS, sans framework.
Le flou qui fait fusionner les gouttes demande beaucoup au navigateur et peut saccader sur les téléphones anciens ; réservez-le à une section plutôt qu’à tout le site. S’il y a du texte par-dessus, baissez d’abord l’opacité, puis la vitesse.