Polarlicht-Hintergrund
Weiche Lichtbänder, die über einen Sternenhimmel wogen, als animierter Vollbild-Hintergrund in reinem HTML und CSS.
Einstellungen
Code
<div class="pt-aurora"><b></b><b></b><b></b><i style="left:0.0%;top:29.6%;--z:1.5;--t:-1.1s"></i><i style="left:59.8%;top:49.3%;--z:1.3;--t:-0.1s"></i><i style="left:3.8%;top:60.3%;--z:1.3;--t:-1.7s"></i><i style="left:49.3%;top:7.8%;--z:1.3;--t:-1.8s"></i><i style="left:1.3%;top:1.7%;--z:1.3;--t:-0.6s"></i><i style="left:25.2%;top:4.5%;--z:2.4;--t:-2.4s"></i><i style="left:53.9%;top:43.6%;--z:1.5;--t:-2.9s"></i><i style="left:24.8%;top:7.8%;--z:2.3;--t:-0.9s"></i><i style="left:78.7%;top:10.7%;--z:1.4;--t:-3.0s"></i><i style="left:89.8%;top:20.2%;--z:2.8;--t:-0.3s"></i><i style="left:74.1%;top:71.1%;--z:1.3;--t:-0.8s"></i><i style="left:95.5%;top:16.4%;--z:2.6;--t:-2.0s"></i><i style="left:81.8%;top:23.2%;--z:1.5;--t:-1.3s"></i><i style="left:71.3%;top:61.9%;--z:1.1;--t:-1.5s"></i><i style="left:46.0%;top:52.0%;--z:2.3;--t:-0.5s"></i><i style="left:71.4%;top:38.5%;--z:2.0;--t:-2.9s"></i><i style="left:96.0%;top:36.1%;--z:2.4;--t:-0.8s"></i><i style="left:84.3%;top:16.6%;--z:1.9;--t:-0.5s"></i><i style="left:83.1%;top:55.6%;--z:2.1;--t:-1.2s"></i><i style="left:82.3%;top:11.3%;--z:1.5;--t:-0.9s"></i><i style="left:48.3%;top:28.2%;--z:1.1;--t:-0.2s"></i><i style="left:60.5%;top:66.6%;--z:1.4;--t:-0.5s"></i><i style="left:99.8%;top:49.9%;--z:2.3;--t:-2.8s"></i><i style="left:5.3%;top:40.5%;--z:2.4;--t:-1.6s"></i><i style="left:23.6%;top:39.3%;--z:2.5;--t:-0.7s"></i><i style="left:61.2%;top:30.3%;--z:2.6;--t:-1.6s"></i><i style="left:46.1%;top:53.6%;--z:1.7;--t:-0.3s"></i><i style="left:60.3%;top:37.2%;--z:2.6;--t:-0.7s"></i><i style="left:66.4%;top:50.4%;--z:2.6;--t:-1.6s"></i><i style="left:47.9%;top:47.9%;--z:1.3;--t:-1.2s"></i><i style="left:27.3%;top:61.8%;--z:1.0;--t:-0.7s"></i><i style="left:8.1%;top:9.7%;--z:2.5;--t:-2.2s"></i><i style="left:54.3%;top:71.4%;--z:2.2;--t:-2.9s"></i><i style="left:45.1%;top:3.3%;--z:1.3;--t:-0.5s"></i><i style="left:49.9%;top:33.2%;--z:2.4;--t:-1.6s"></i><i style="left:77.0%;top:65.0%;--z:2.2;--t:-1.3s"></i><i style="left:95.0%;top:17.0%;--z:1.8;--t:-2.1s"></i><i style="left:75.6%;top:34.9%;--z:1.7;--t:-2.6s"></i><i style="left:37.8%;top:44.9%;--z:2.7;--t:-2.7s"></i><i style="left:38.0%;top:71.5%;--z:2.6;--t:-1.2s"></i><i style="left:74.4%;top:32.2%;--z:1.3;--t:-1.8s"></i><i style="left:8.5%;top:52.9%;--z:1.5;--t:-1.3s"></i><i style="left:84.2%;top:17.3%;--z:1.7;--t:-2.0s"></i><i style="left:27.7%;top:36.5%;--z:1.4;--t:-0.3s"></i><i style="left:75.9%;top:30.4%;--z:1.6;--t:-1.1s"></i><i style="left:4.9%;top:26.8%;--z:1.8;--t:-2.4s"></i><i style="left:95.5%;top:48.4%;--z:1.1;--t:-2.2s"></i><i style="left:75.0%;top:43.7%;--z:1.7;--t:-1.6s"></i><i style="left:80.1%;top:34.0%;--z:1.5;--t:-1.2s"></i><i style="left:85.4%;top:67.4%;--z:1.6;--t:-1.4s"></i><i style="left:6.7%;top:8.0%;--z:2.7;--t:-2.6s"></i><i style="left:55.4%;top:65.1%;--z:2.1;--t:-1.6s"></i><i style="left:31.0%;top:18.2%;--z:2.3;--t:-1.9s"></i><i style="left:32.0%;top:14.2%;--z:2.1;--t:-0.4s"></i><i style="left:40.2%;top:9.0%;--z:1.4;--t:-0.2s"></i><i style="left:65.8%;top:43.1%;--z:1.7;--t:-0.6s"></i><i style="left:14.0%;top:35.0%;--z:1.0;--t:-0.1s"></i><i style="left:59.9%;top:56.2%;--z:2.1;--t:-2.0s"></i><i style="left:63.2%;top:31.3%;--z:1.6;--t:-2.9s"></i><i style="left:64.7%;top:25.4%;--z:2.7;--t:-1.6s"></i><i style="left:64.5%;top:23.9%;--z:1.7;--t:-1.3s"></i><i style="left:9.5%;top:47.6%;--z:2.8;--t:-1.4s"></i><i style="left:89.1%;top:63.7%;--z:1.0;--t:-0.0s"></i><i style="left:32.0%;top:13.7%;--z:2.7;--t:-0.8s"></i><i style="left:4.7%;top:3.1%;--z:2.1;--t:-1.5s"></i><i style="left:12.7%;top:36.5%;--z:1.5;--t:-0.7s"></i><i style="left:29.2%;top:66.7%;--z:2.2;--t:-1.9s"></i><i style="left:24.3%;top:12.5%;--z:2.5;--t:-2.5s"></i><i style="left:17.0%;top:60.6%;--z:1.1;--t:-2.6s"></i><i style="left:33.1%;top:26.4%;--z:1.5;--t:-2.5s"></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
Dieser Polarlicht-Hintergrund ist sofort ein Hero für alles rund um Nachthimmel und Ruhe: einen Reiseveranstalter mit Nordlicht-Touren nach Lappland, die Landingpage einer Schlaf- oder Meditations-App oder die Veranstaltungsseite eines Astronomievereins. Die Lichtbänder wandern und biegen sich langsam, während kleine Sterne funkeln, ganz ohne Canvas.
Kommt eine Überschrift darüber, nimm Deckkraft oder Tempo etwas zurück, damit der Text die Hauptrolle behält. Grün mit Violett wirkt wie ein echtes Polarlicht, mit deinen Markenfarben wird daraus ein sanfterer, abstrakter Verlaufshintergrund.