Gooey-Blobs als Hintergrund
Farbige Tropfen kreisen, verschmelzen und trennen sich wie Flüssigkeit. Ein Vollbild-Hintergrund in reinem HTML und CSS.
Einstellungen
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 für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus Hintergründe
Wofür du ihn nutzen kannst
Ein Hintergrund mit Gooey-Blobs legt etwas Weiches, Lebendiges hinter die Headline eines Hero-Bereichs: ein Kreativstudio, eine Marke für Süßigkeiten oder Getränke, eine Musik-App, die Launch-Seite eines verspielten Produkts. Neun Tropfen in drei Farben treiben umher und fließen ineinander, alles in CSS, also ohne Framework in jede Seite einsetzbar.
Die Unschärfe, die die Tropfen verschmelzen lässt, ist für den Browser aufwendig und kann auf älteren Handys ruckeln. Setz sie deshalb in einem Abschnitt ein, nicht auf der ganzen Website. Steht Text darauf, senk zuerst die Deckkraft, dann das Tempo.