devpack
EnglishDeutsch · StartseiteFrançais · AccueilEspañol · InicioPortuguês (Brasil) · Início
Auditoría web

Esta página aún no está traducida al español, así que la mostramos en 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.

Actualizado el 


  


    
 Tus datos nunca salen de tu ordenador. Todo se procesa localmente en tu navegador.

    
    
    

      
Cómo 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.
También se busca como: shooting star css, shooting star animation, meteor animation css, night sky animation css, falling star effect, star animation css.
Herramientas que combinan con: 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.
Preguntas frecuentes
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.
¿Puedo instalar Falling Stars Animation como aplicación web y utilizarla sin conexión?
Sí. Falling Stars Animation es una aplicación web instalable (PWA): se instala desde el navegador, no se descarga desde una tienda de aplicaciones. Haz clic en «Instalar aplicación» en la parte superior de esta página en Chrome o Edge (Windows, macOS, Linux, ChromeOS) o, en Android, utiliza «Compartir» → «Añadir a la pantalla de inicio» en iPhone y iPad, o «Archivo» → «Añadir al Dock» en Safari 17+ en un Mac. A continuación, se abrirá en su propia ventana con su propio icono y, como se ejecuta íntegramente en tu navegador, seguirá funcionando sin conexión. Firefox en el ordenador de sobremesa no permite instalar aplicaciones web. Cómo funciona la instalación.

      
    

    
    
Herramientas 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…