devpack
EnglishDeutsch · StartseiteFrançais · AccueilEspañol · InicioPortuguês (Brasil) · Início
Auditoria do site

Esta página ainda não foi traduzida para o português, por isso aparece em inglês.

Falling Stars Animation — Shooting Stars in CSS

Send shooting stars streaking across a night-sky hero, or let star shapes drift down and twirl. Control how often they appear, the trail length, angle and color.

Atualizado em 


  


    
 Seus dados nunca saem do seu computador. Todo o processamento acontece localmente no navegador.

    
    
    

      
Como usar: Falling Stars Animation
  1. The preview starts with Shooting stars. Pause between sets how rarely each one appears.
  2. Set the trail length with Size and the angle with Wind.
  3. Choose Falling stars for star shapes that drift down and spin.
  4. Copy the code onto a dark section.
Shooting stars with one keyframe
A shooting star is a thin gradient streak — transparent tail, bright glowing head — rotated to its direction of travel. The keyframe moves it across the box in the first part of its cycle and keeps it hidden for the rest, so each star flashes by and then waits; different delays spread them out.
More effects are in the Particle Animation Generator.
Também pesquisado como: shooting star css, shooting star animation, meteor animation css, night sky animation css, falling star effect, star animation css.
Ferramentas que combinam com: Falling Stars Animation
  • CSS Snow Effect — Let it snow on your website for the holidays: soft snow or snowflakes, light flurries or a blizzard.
  • CSS Rain Animation — Make it rain on a page or hero section — from a light drizzle to a slanted downpour.
  • Confetti Animation CSS — Celebrate a launch, a sign-up or a birthday with falling confetti that flutters and tumbles in mixed colors.
  • CSS Keyframes Generator — A visual editor for @keyframes.
Perguntas frequentes
How do I make a shooting star animation in CSS?
Animate a thin gradient line diagonally across the screen, rotated to match its path, during the first part of the keyframe and keep it off-screen for the rest. Choose Shooting stars here and copy the code.
How do I make them less frequent?
Raise Pause between and lower How many.
Can I use my own star image?
Yes — choose My SVG / image and upload it, or Emoji and type a star.
Posso instalar o Falling Stars Animation como um aplicativo da web e usá-lo offline?
Sim. O Falling Stars Animation é 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.

      
    

    
    
Ferramentas relacionadas
localParticle Animation GeneratorAdd falling snow, rain, shooting stars, confetti, petals, autumn leaves, hearts or rising bubbles to any…localCSS Snow EffectLet it snow on your website for the holidays: soft snow or snowflakes, light flurries or a blizzard. Copy…localCSS Rain AnimationMake it rain on a page or hero section — from a light drizzle to a slanted downpour. Drops tilt to match…localConfetti Animation CSSCelebrate a launch, a sign-up or a birthday with falling confetti that flutters and tumbles in mixed…localCSS Keyframes GeneratorA visual editor for @keyframes. Add keyframes on a timeline, set transforms, opacity, blur and color at…localCSS Gradient GeneratorDesign a gradient visually — drag color stops, change the angle or type, start from a preset — and copy…