Como usar: Gerador de Animação de Partículas
- Escolha um efeito — e clique em + Adicionar camada para empilhar mais (por exemplo, neve com estrelas cadentes); remova uma camada com o seu ×. Efeitos: neve, flocos de neve, chuva, estrelas cadentes, estrelas caindo, confete, pétalas, folhas, corações, bolhas — ou Meu SVG / imagem para enviar o seu, ou Emoji.
- Ajuste quantas, tamanho, velocidade, vento e balanço. Pausa entre faz as partículas aparecerem de tempos em tempos, como estrelas cadentes.
- Escolha se ele cobre a página inteira (sobreposição fixa) ou uma seção.
- Copie o HTML + CSS (sem JavaScript) ou a versão mais curta em JavaScript, ou baixe uma página de demonstração.
Como a animação funciona
Cada partícula é um elemento <i> com tamanho, posição inicial, duração e atraso próprios, armazenados em propriedades personalizadas do CSS. Uma regra @keyframes move a partícula de acima da borda superior até abaixo da inferior; um <b> interno balança de um lado para o outro e gira. Apenas transform é animado, então o navegador executa tudo na GPU sem recalcular o layout da página.
.dp-fall { position: fixed; inset: 0; overflow: hidden; pointer-events: none; container-type: size; }
.dp-fall i { position: absolute; top: 0; animation: dp-fall var(--d) linear var(--t) infinite; }
@keyframes dp-fall { to { transform: translate(var(--dx), calc(100cqh + var(--s) * 3)); } }Atrasos negativos fazem cada partícula começar no meio da queda, então a tela já está cheia quando a página carrega. pointer-events: none deixa os cliques passarem, e prefers-reduced-motion oculta o efeito para visitantes que desativaram animações.
Usando seu próprio SVG
Escolha Meu SVG / imagem e envie um SVG pequeno, PNG, WebP ou GIF — um logotipo, um floco de neve, uma moeda. Ele é incorporado ao CSS como data URI, então o trecho continua sem precisar de nenhum arquivo extra. As formas prontas são desenhadas com uma máscara CSS, então Cores mistas pode trocar a cor de cada uma.
Veja também: Gerador de Keyframes CSS, Gerador de Animação CSS, Gerador de Blob SVG.
Também pesquisado como: gerador de animação de queda, efeito de partículas css, efeito de neve css, animação de neve caindo css, animação de chuva css, animação de estrelas cadentes, estrela cadente css, animação de confete css.
Ferramentas que combinam com: Gerador de Animação de Partículas
- Gerador de Ondas SVG — Crie divisores ondulados de seção para landing pages: adicione ou remova ondas (até 6, cada uma com cor, opacidade e formato próprios), defina o número de cristas, a altura e a suavidade, escolha as cores e se a onda fica no topo ou na base.
- Gerador de Loader CSS — Escolha entre 13 spinners de carregamento em CSS puro, ajuste tamanho, cores, espessura e velocidade e copie HTML e CSS leves e acessíveis — sem imagens, SVG ou JavaScript.
- Gerador de Gradiente CSS — Monte um gradiente visualmente: arraste as paradas de cor, troque o ângulo ou o tipo, comece de uma predefinição e copie um CSS pronto para produção, com uma cor sólida de fallback.
- Gerador de Animação Hover CSS — Crie animações hover para botões, cards, links e ícones.