Como usar: Animação de Chuva CSS
- A pré-visualização começa com Chuva. Aumente Quantidade para um temporal.
- Defina o tamanho das gotas (comprimento) e a velocidade.
- Use Vento para inclinar a chuva — cada gota se inclina na direção em que está caindo.
- Copie o código.
Como a chuva é desenhada
Cada gota é um elemento fino com um gradiente que vai do transparente até a cor da gota, dando a impressão de um rastro em movimento. Ela cai rapidamente em linha reta; com vento, a gota se desloca lateralmente em unidades de altura do contêiner e é rotacionada no mesmo ângulo, por isso sempre aponta para o lado em que se move. Um fundo escuro e azulado reforça o efeito.
Para neve, estrelas e confete, veja o Gerador de Animação de Partículas.
Também pesquisado como: efeito de chuva css, animação de chuva html, efeito de chuva para site, gotas de chuva css, animação de chuva de fundo.
Ferramentas que combinam com: Animação de Chuva CSS
- Efeito de Neve CSS — Deixe a neve cair no seu site nas festas de fim de ano: neve suave ou flocos de neve, uma nevasca leve ou uma tempestade.
- Animação de Estrelas Cadentes — Faça estrelas cadentes riscarem o céu noturno da sua seção principal, ou deixe formas de estrela descerem e girarem.
- Confete Animado CSS — Comemore um lançamento, um cadastro ou um aniversário com confete caindo que balança e gira em cores variadas.
- Gerador de Keyframes CSS — Um editor visual para @keyframes.
Perguntas frequentes
Como faço um efeito de chuva em CSS?
Anime várias linhas finas com gradiente, saindo acima da borda superior e indo até abaixo da inferior, com temporização linear e durações curtas e levemente diferentes. Este gerador escreve esse CSS para você.
A chuva pode cair em diagonal?
Sim — defina o Vento. As gotas se deslocam para o lado e são rotacionadas para acompanhar.
Posso adicionar chuva a uma única imagem ou seção de destaque?
Sim — escolha Uma seção e cole o código dentro da seção de destaque, que precisa de position: relative.
Posso instalar o Animação de Chuva CSS como um aplicativo da web e usá-lo offline?
Sim. O Animação de Chuva CSS é um aplicativo da web instalável (PWA) — instalado a partir do seu navegador, não baixado de uma loja de aplicativos. Clique em “Instalar aplicativo” na parte superior desta página no Chrome ou no Edge (Windows, macOS, Linux, ChromeOS) ou, no Android, use “Compartilhar” → “Adicionar à tela inicial” no iPhone e no iPad, ou “Arquivo” → “Adicionar ao Dock” no Safari 17+ em um Mac. Em seguida, ela se abre em uma janela própria com seu próprio ícone e, como é executada inteiramente no seu navegador, continua funcionando offline. O Firefox no desktop não permite a instalação de aplicativos da web. Como funciona a instalação.