Como usar: Confete Animado CSS
- A prévia começa com Confete em cores variadas.
- Defina quantas peças, o tamanho e a velocidade; o Balanço faz elas oscilarem enquanto caem.
- Desative Cores variadas para usar só uma cor da sua marca.
- Copie o código para a sua página de agradecimento ou de sucesso.
Confete que gira
Cada peça é um pequeno retângulo que cai com um leve balanço enquanto gira em 3D (rotate3d), alternando entre a face e a borda como papel de verdade. As cores são escolhidas para cada peça com uma propriedade personalizada do CSS.
Para neve, chuva e formas próprias, veja o Gerador de Animação de Partículas.
Também pesquisado como: confete caindo css, efeito de confete site, css confete, animação de confete background, animação de comemoração css.
Ferramentas que combinam com: Confete Animado 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.
- Animação de Chuva CSS — Faça chover em uma página ou seção de destaque, de uma leve garoa a um temporal inclinado.
- Gerador de Animação CSS — Crie animações CSS em uma linha do tempo de keyframes real.
Perguntas frequentes
Como adiciono confete em uma página de agradecimento?
Copie o HTML + CSS e cole na página. O confete cai continuamente sobre a página e não bloqueia cliques.
Posso usar as cores da minha marca?
Desative Cores variadas e escolha a sua cor, ou edite os valores de --c no HTML.
O confete pode disparar uma vez só, em vez de repetir?
Este gerador faz quedas contínuas. Para uma explosão única, troque infinite por 1 na regra de animação para que cada peça caia uma vez só.
Posso instalar o Confete Animado CSS como um aplicativo da web e usá-lo offline?
Sim. O Confete Animado 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.