Lavalampen-Hintergrund
Warme Blasen, die aufsteigen, sich dehnen und über den ganzen Bildschirm ineinanderfließen, in reinem HTML und CSS.
Einstellungen
Code
<div class="pt-lava"><svg width="0" height="0" style="position:absolute"><filter id="pt-lava-f"><feGaussianBlur in="SourceGraphic" stdDeviation="18"/><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 26 -11"/></filter></svg><b><i style="left:5.1%;--z:18.1cqmin;--t:17.9s;--dl:-8.7s"></i><i style="left:80.1%;--z:13.8cqmin;--t:13.7s;--dl:-17.8s"></i><i style="left:71.1%;--z:13.5cqmin;--t:21.0s;--dl:-17.0s"></i><i style="left:15.6%;--z:10.6cqmin;--t:20.5s;--dl:-14.7s"></i><i style="left:10.2%;--z:19.5cqmin;--t:20.9s;--dl:-21.2s"></i><i style="left:67.8%;--z:16.1cqmin;--t:22.0s;--dl:-21.1s"></i><i style="left:44.3%;--z:15.2cqmin;--t:13.1s;--dl:-13.1s"></i><i style="left:56.7%;--z:19.9cqmin;--t:13.3s;--dl:-1.8s"></i><i style="left:13.1%;--z:12.5cqmin;--t:21.3s;--dl:-21.2s"></i><i style="left:62.1%;--z:17.9cqmin;--t:14.5s;--dl:-3.6s"></i><u></u><u></u></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
Während der Lavalampen-Loader ein kleines Objekt ist, füllt dieser Hintergrund den ganzen Bildschirm mit langsamen, schmelzenden Formen. Er gibt der Seite eines Musikfestivals, eines unabhängigen Plattenlabels oder dem Hero einer Cocktailbar einen psychedelischen Retro-Glanz. Die Blasen steigen aus einem Becken am unteren Rand auf und verschmelzen unterwegs.
Er ist ein starkes Bild, also gib ihm einen eigenen Abschnitt, etwa den Hero oder das Ticket-Banner, statt ihn hinter lange Texte zu legen. Mit geringerer Dichte gibt es weniger, dafür größere Blasen. Warme Orangetöne wirken klassisch, Pink und Elektroblau eher nach Clubnacht.