HTML + CSSHintergründe

Glühwürmchen

Kleine Lichtpunkte schweben und blinken über dem Schimmer eines dunklen Waldes, ruhig und ein bisschen magisch.

Einstellungen

1x
1x
1

Code

<div class="pt-fireflies"><b></b><i style="left:0.0%;top:79.8%;--z:6.5;--t:11.1s;--dl:-2.6s"></i><i style="left:59.8%;top:99.0%;--z:4.0;--t:8.1s;--dl:-8.8s"></i><i style="left:5.4%;top:92.2%;--z:4.8;--t:11.8s;--dl:-1.7s"></i><i style="left:12.4%;top:23.0%;--z:3.6;--t:6.4s;--dl:-5.7s"></i><i style="left:76.7%;top:50.9%;--z:4.5;--t:10.3s;--dl:-10.8s"></i><i style="left:6.6%;top:94.2%;--z:5.9;--t:11.9s;--dl:-10.2s"></i><i style="left:11.7%;top:15.5%;--z:5.0;--t:14.0s;--dl:-6.4s"></i><i style="left:89.3%;top:39.3%;--z:6.5;--t:12.5s;--dl:-9.4s"></i><i style="left:18.8%;top:68.9%;--z:3.7;--t:12.6s;--dl:-9.5s"></i><i style="left:52.6%;top:37.5%;--z:5.3;--t:11.8s;--dl:-2.3s"></i><i style="left:9.6%;top:17.8%;--z:7.0;--t:12.2s;--dl:-7.6s"></i><i style="left:49.7%;top:33.4%;--z:6.4;--t:6.7s;--dl:-3.8s"></i><i style="left:99.8%;top:65.6%;--z:6.4;--t:11.6s;--dl:-10.1s"></i><i style="left:37.4%;top:65.1%;--z:6.6;--t:13.2s;--dl:-7.7s"></i><i style="left:51.5%;top:20.7%;--z:6.3;--t:7.5s;--dl:-1.7s"></i><i style="left:75.3%;top:79.6%;--z:3.2;--t:13.9s;--dl:-2.4s"></i><i style="left:38.4%;top:68.8%;--z:4.3;--t:9.7s;--dl:-3.3s"></i><i style="left:22.0%;top:54.2%;--z:3.9;--t:13.9s;--dl:-9.2s"></i><i style="left:89.7%;top:51.8%;--z:4.5;--t:12.2s;--dl:-5.8s"></i><i style="left:76.6%;top:70.6%;--z:5.7;--t:11.2s;--dl:-10.1s"></i><i style="left:28.3%;top:85.2%;--z:3.1;--t:12.0s;--dl:-3.2s"></i><i style="left:0.5%;top:87.3%;--z:5.8;--t:7.8s;--dl:-6.6s"></i><i style="left:6.3%;top:75.7%;--z:5.6;--t:11.6s;--dl:-1.7s"></i><i style="left:68.3%;top:45.2%;--z:4.9;--t:6.1s;--dl:-10.3s"></i><i style="left:91.1%;top:80.1%;--z:3.3;--t:11.6s;--dl:-7.9s"></i><i style="left:90.6%;top:74.1%;--z:3.2;--t:12.4s;--dl:-9.4s"></i><i style="left:62.7%;top:73.9%;--z:3.6;--t:8.5s;--dl:-1.4s"></i><i style="left:14.2%;top:57.0%;--z:3.4;--t:8.6s;--dl:-10.6s"></i><i style="left:39.2%;top:20.4%;--z:5.7;--t:6.9s;--dl:-9.1s"></i><i style="left:58.4%;top:98.1%;--z:6.5;--t:8.4s;--dl:-3.6s"></i><i style="left:74.5%;top:30.6%;--z:5.6;--t:7.6s;--dl:-9.9s"></i><i style="left:21.5%;top:71.2%;--z:5.7;--t:6.4s;--dl:-12.1s"></i><i style="left:20.5%;top:15.4%;--z:3.7;--t:8.1s;--dl:-8.3s"></i><i style="left:93.5%;top:96.3%;--z:6.9;--t:13.2s;--dl:-8.6s"></i><i style="left:75.5%;top:65.9%;--z:6.7;--t:9.2s;--dl:-6.9s"></i><i style="left:67.2%;top:41.7%;--z:6.3;--t:9.6s;--dl:-7.9s"></i><i style="left:34.0%;top:57.4%;--z:7.0;--t:10.5s;--dl:-9.6s"></i><i style="left:52.0%;top:38.1%;--z:3.3;--t:8.0s;--dl:-1.1s"></i><i style="left:89.7%;top:68.1%;--z:5.4;--t:7.4s;--dl:-12.2s"></i><i style="left:70.7%;top:98.2%;--z:4.2;--t:7.8s;--dl:-4.5s"></i><i style="left:46.9%;top:78.4%;--z:5.9;--t:6.3s;--dl:-12.3s"></i><i style="left:7.6%;top:39.3%;--z:6.2;--t:7.4s;--dl:-9.7s"></i><i style="left:11.1%;top:49.7%;--z:4.0;--t:8.6s;--dl:-3.6s"></i><i style="left:2.8%;top:84.3%;--z:6.3;--t:10.6s;--dl:-5.6s"></i><i style="left:60.7%;top:17.1%;--z:5.9;--t:9.0s;--dl:-13.7s"></i></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

Glühwürmchen sorgen für eine warme, leicht verträumte Stimmung. Probier sie auf der Einladungsseite einer Hochzeit im Freien, der Website eines Sommerfestivals, in einer Gutenacht-App für Kinder oder auf der Buchungsseite eines Glamping-Platzes. Jedes Licht hat seinen eigenen Rhythmus, deshalb fällt die Schleife nie auf. Ein ruhiger animierter Glühwürmchen-Hintergrund in HTML und CSS.

Warme Gelb- und Grüntöne auf sehr dunklem Grund wirken am natürlichsten, in Blau eher wie aus einem Fantasy-Film. Eine Serifenschrift in Creme oder gebrochenem Weiß passt gut darüber und kommt den Lichtern nicht in die Quere.