Farbiger Rauch
Weiche Farbwolken, die langsam wirbeln und wachsen, wie Tinte im Wasser oder Bühnennebel.
Einstellungen
Code
<div class="pt-smoke"><i style="--cc:var(--c1);--x:-20.0%;--y:34.5%;--ox:89.6%;--oy:41.7%;--t:20.6s"></i><i style="--cc:var(--c2);--x:16.1%;--y:-11.6%;--ox:84.4%;--oy:86.7%;--t:29.0s"></i><i style="--cc:var(--c3);--x:4.9%;--y:2.5%;--ox:87.5%;--oy:42.5%;--t:26.5s"></i><i style="--cc:var(--c1);--x:56.8%;--y:3.7%;--ox:60.6%;--oy:44.4%;--t:24.6s"></i><i style="--cc:var(--c2);--x:24.3%;--y:6.2%;--ox:89.8%;--oy:52.7%;--t:31.6s"></i><i style="--cc:var(--c3);--x:42.2%;--y:-14.4%;--ox:32.7%;--oy:56.5%;--t:22.5s"></i><i style="--cc:var(--c1);--x:-13.5%;--y:4.4%;--ox:45.8%;--oy:30.6%;--t:27.3s"></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
Farbiger Rauch hat eine geheimnisvolle, atmosphärische Wirkung. Er passt zum Hero einer Parfummarke, zur Website einer Cocktailbar oder zur Teaser-Seite für ein neues Album. Sieben weichgezeichnete Wolken drehen und blähen sich unterschiedlich schnell, deshalb wiederholt sich die Farbmischung nie auffällig. Ein animierter Rauch-Hintergrund in reinem CSS.
Richtig schön wird er auf dunklem Grund mit zwei oder drei kräftigen Farben, auf Weiß verliert er fast sein ganzes Leuchten. Steht Text darauf, nimm die Deckkraft leicht zurück, damit die Wolken dünne Schrift nicht verschlucken.