Comment utiliser : Animation pluie CSS
- L'aperçu démarre avec la pluie. Augmentez Nombre pour une averse.
- Réglez la taille des gouttes (longueur) et la vitesse.
- Utilisez le vent pour incliner la pluie : chaque goutte s'oriente selon sa direction de déplacement.
- Copiez le code.
Comment la pluie est dessinée
Chaque goutte est un élément fin avec un dégradé allant de la transparence à la couleur de la goutte, ce qui donne l'impression d'une traînée de mouvement. Elle tombe rapidement en ligne droite ; avec le vent, la goutte se déplace latéralement en unités de hauteur du conteneur et subit la même rotation, si bien qu'elle pointe toujours dans le sens de son mouvement. Un fond sombre tirant sur le bleu renforce l'effet.
Pour la neige, les étoiles ou les confettis, consultez le Générateur d'animation de particules.
Aussi recherché comme : effet pluie css, animation pluie html, effet de pluie site web, gouttes de pluie css, animation pluie en arrière-plan.
Outils complémentaires : Animation pluie CSS
- Effet neige CSS — Faites neiger votre site pour les fêtes : neige douce ou flocons, légères bourrasques ou tempête.
- Animation d'étoiles filantes — Faites traverser à des étoiles filantes un héros de ciel nocturne, ou laissez des formes d'étoiles descendre en tournoyant.
- Confettis CSS — Célébrez un lancement, une inscription ou un anniversaire avec des confettis qui tombent, qui virevoltent et tournoient en couleurs variées.
- Générateur Keyframes CSS — Un éditeur visuel pour @keyframes.
Questions fréquentes
Comment créer un effet de pluie en CSS ?
Animez de nombreuses fines traînées en dégradé, du dessus du bord supérieur jusqu'en dessous du bas, avec une temporisation linéaire et des durées courtes et légèrement différentes. Ce générateur écrit ce CSS à votre place.
La pluie peut-elle tomber en biais ?
Oui, réglez le vent. Les gouttes se déplacent latéralement et sont tournées en conséquence.
Peut-on ajouter la pluie à une seule image ou à une section héros ?
Oui, choisissez Une section et collez le code à l'intérieur de la section héros, qui doit avoir position: relative.
Puis-je installer Animation pluie CSS en tant qu’application web et l’utiliser hors ligne ?
Oui. Animation pluie CSS est une application web installable (PWA) : elle s’installe depuis votre navigateur, sans passer par une boutique d’applications. Cliquez sur « Installer l’application » en haut de cette page dans Chrome ou Edge (Windows, macOS, Linux, ChromeOS) ; sur Android, utilisez « Partager » → « Ajouter à l’écran d’accueil » sur iPhone et iPad ; ou « Fichier » → « Ajouter au Dock » dans Safari 17+ sur Mac. L’application s’ouvre alors dans sa propre fenêtre avec sa propre icône, et comme elle s’exécute entièrement dans votre navigateur, elle continue de fonctionner hors ligne. Firefox sur ordinateur de bureau ne permet pas d’installer d’applications web. Comment fonctionne l’installation.