So nutzt du: CSS-Regen-Animation
- Die Vorschau startet mit Regen. Erhöhe Anzahl, für einen Wolkenbruch.
- Stelle die Größe der Tropfen (Länge) und die Geschwindigkeit ein.
- Nutze Wind, um den Regen zu neigen — jeder Tropfen kippt in seine Fallrichtung.
- Kopiere den Code.
So wird der Regen gezeichnet
Jeder Tropfen ist ein dünnes Element mit einem Verlauf von transparent zur Tropfenfarbe, sodass er wie ein Bewegungsstrich aussieht. Er fällt schnell in einer geraden Linie; bei Wind bewegt sich der Tropfen seitlich in Einheiten der Container-Höhe und wird um denselben Winkel gedreht, sodass er immer in Bewegungsrichtung zeigt. Ein dunkler, bläulicher Hintergrund verstärkt den Effekt.
Für Schnee, Sterne und Konfetti schau dir den Partikel-Animation-Generator an.
Auch gesucht als: regen effekt css, regen animation html, regenfall effekt website, regentropfen css, regen hintergrund animation.
Passende Tools zu: CSS-Regen-Animation
- CSS-Schneeeffekt — Lass es auf deiner Website zur Weihnachtszeit schneien: sanfter Schnee oder Schneeflocken, leichtes Gestöber oder ein Schneesturm.
- Falling Stars Animation — Lass Sternschnuppen über einen Nachthimmel-Hero flitzen oder Sternformen herabschweben und sich drehen.
- Konfetti-Animation CSS — Feiere einen Launch, eine Anmeldung oder einen Geburtstag mit fallendem Konfetti, das in gemischten Farben flattert und taumelt.
- CSS Keyframes Generator — Ein visueller Editor für @keyframes.
Häufige Fragen
Wie erstelle ich einen Regeneffekt in CSS?
Animiere viele dünne Verlaufsstriche von oberhalb der oberen Kante bis unterhalb der unteren Kante, mit linearem Timing und kurzen, leicht unterschiedlichen Dauern. Dieser Generator schreibt dieses CSS für dich.
Kann der Regen schräg fallen?
Ja — stelle Wind ein. Die Tropfen bewegen sich seitlich und werden passend gedreht.
Kann ich Regen zu einem einzelnen Bild oder Hero-Bereich hinzufügen?
Ja — wähle Ein Abschnitt und füge den Code in den Hero-Bereich ein, der position: relative benötigt.
Kann ich CSS-Regen-Animation als Web-App installieren und offline nutzen?
Ja. CSS-Regen-Animation ist eine installierbare Web-App (PWA) – sie wird über Ihren Browser installiert und nicht aus einem App-Store heruntergeladen. Klicken Sie oben auf dieser Seite in Chrome oder Edge (Windows, macOS, Linux, ChromeOS) auf „App installieren“ oder verwenden Sie auf Android-Geräten „Teilen“ → „Zum Startbildschirm hinzufügen“ auf dem iPhone und iPad bzw. „Datei“ → „Zum Dock hinzufügen“ in Safari 17+ auf einem Mac. Die App öffnet sich dann in einem eigenen Fenster mit einem eigenen Symbol, und da sie vollständig in Ihrem Browser ausgeführt wird, funktioniert sie auch offline. Firefox auf dem Desktop kann keine Web-Apps installieren. So funktioniert die Installation.