HTML + CSSHintergründe

Regen am Fenster

Tropfen rinnen eine Fensterscheibe hinab, dahinter leuchten unscharfe Lichter der Stadt, auf Canvas gezeichnet.

Einstellungen

1x
1x
1

Code

<div class="pt-rain-glass"><div class="bk"><i style="--x:0.1%;--y:97.0%;--s:18.1em;--c:var(--c1);--dl:-5.9s"></i><i style="--x:48.2%;--y:92.5%;--s:12.4em;--c:var(--c2);--dl:-6.2s"></i><i style="--x:81.6%;--y:5.7%;--s:19.8em;--c:var(--c3);--dl:-2.1s"></i><i style="--x:61.8%;--y:14.6%;--s:19.4em;--c:var(--c1);--dl:-1.6s"></i><i style="--x:7.5%;--y:70.1%;--s:19.7em;--c:var(--c2);--dl:-0.7s"></i><i style="--x:99.1%;--y:49.6%;--s:16.2em;--c:var(--c3);--dl:-5.4s"></i><i style="--x:0.1%;--y:95.1%;--s:13.4em;--c:var(--c1);--dl:-4.1s"></i><i style="--x:85.6%;--y:80.8%;--s:19.1em;--c:var(--c2);--dl:-2.9s"></i><i style="--x:88.3%;--y:31.9%;--s:20.8em;--c:var(--c3);--dl:-7.0s"></i><i style="--x:57.0%;--y:83.3%;--s:11.2em;--c:var(--c1);--dl:-2.0s"></i><i style="--x:48.1%;--y:41.2%;--s:18.1em;--c:var(--c2);--dl:-4.4s"></i><i style="--x:28.8%;--y:61.4%;--s:14.7em;--c:var(--c3);--dl:-4.1s"></i><i style="--x:81.7%;--y:71.3%;--s:18.0em;--c:var(--c1);--dl:-3.8s"></i><i style="--x:63.7%;--y:1.7%;--s:17.3em;--c:var(--c2);--dl:-1.2s"></i></div><canvas></canvas></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

Alle ansehen: Hintergründe

Wofür du ihn nutzen kannst

Ein stimmungsvoller, filmischer Hintergrund. Hinter der Scheibe leuchten unscharfe Lichter in deinen drei Farben, während sich kleine Tropfen auf dem Glas sammeln. Ab und zu beginnt ein großer Tropfen zu rinnen, stoppt, beschleunigt wieder, schluckt die kleinen Tropfen auf seinem Weg und hinterlässt eine Spur winziger Perlen, wie Regen an einem echten Fenster.

Jeder Tropfen hat einen Glanzpunkt und einen dunkleren Rand, die Lichtbrechung andeuten. Die Dichte steuert, wie nass die Scheibe ist, das Tempo, wie schnell die Tropfen laufen. Passt zu Podcasts, Cafés, Musikplayern und ruhigen Leseseiten.