Cómo crear una lluvia de pétalos animados para tu blog con HTML y CSS

 

Hoy vamos a crear un pequeño detalle decorativo para tu blog: una lluvia suave de pétalos que caen por la pantalla con movimiento natural, como si una brisa los llevara lentamente.

Este gadget está pensado para crear una atmósfera más tranquila y visual. No modifica el fondo de tu blog ni ocupa espacio dentro del diseño; simplemente añade una capa decorativa sobre la página.

Dificultad: Intermedia
Tiempo aproximado: 15 minutos
Necesitas: Un blog en Blogger + una imagen en formato PNG para usar como partícula

Antes de empezar

Este efecto está creado utilizando HTML, CSS y JavaScript.

La parte de CSS se encarga de crear el movimiento y la apariencia de las partículas, mientras que JavaScript genera nuevos pétalos automáticamente y controla detalles como:

• tamaño aleatorio
• velocidad de caída
• dirección del viento
• rotación
• desaparición después de caer

La idea es que cada pétalo sea ligeramente diferente, para que el efecto no parezca una animación repetida.

Paso 1: Preparar la imagen de la partícula

El gadget utiliza una pequeña imagen que se repetirá durante la animación. El proceso de la imagen es igual al de la carta, si no lo recuerdas, te invito a revisar esa entrada.

En el código encontrarás esta línea:

const imageURL = "URL-DE-TU-IMAGEN";

Esta dirección corresponde a la imagen del pétalo.

Puedes cambiarla por:

• 🌸 pétalos
• 🍂 hojas
• ❄️ copos de nieve
• ✨ estrellas
• 🕯 pequeños elementos decorativos

Lo recomendable es usar una imagen:

• PNG
• con fondo transparente
• de tamaño pequeño

Así la animación se verá más natural.

Paso 2: Crear las partículas

Esta parte del código crea cada nuevo elemento que caerá por la pantalla:

function createParticle() {

Cada vez que se ejecuta esta función, aparece un nuevo pétalo.

El tamaño cambia automáticamente:

const size = 14 + Math.random() * 16;

Esto significa que cada partícula tendrá una medida diferente.

Si quieres pétalos más pequeños puedes cambiarlo por:

const size = 8 + Math.random() * 10;

Si quieres que sean más grandes:

const size = 25 + Math.random() * 20;

Paso 3: Agregar movimiento con viento

Una de las partes más bonitas de este gadget es que los pétalos no caen en línea recta.

El viento cambia cada cierto tiempo:

setInterval(() => {

  windDirection = (Math.random() * 160 - 80);

}, 3000);

Esto hace que la dirección varíe cada 3 segundos.

El resultado es una caída más parecida a un elemento real moviéndose con el aire.

Paso 4: Ajustar la velocidad de caída

La duración de cada pétalo se define aquí:

const duration = 7 + Math.random() * 10;

El número representa los segundos que tarda en atravesar la pantalla.

Para una caída más lenta:

const duration = 12 + Math.random() * 15;

Para una caída más rápida:

const duration = 4 + Math.random() * 6;

Paso 5: Cambiar la cantidad de pétalos

Al final del script encontramos:

setInterval(createParticle, 900);

Este número controla cada cuánto aparece una nueva partícula.

Por ejemplo:

Más pétalos:

setInterval(createParticle, 400);

Menos pétalos:

setInterval(createParticle, 1500);

Para un estilo delicado y editorial, un número más alto suele verse más elegante.

Paso 6: El efecto de ambiente

El gadget también añade una capa muy suave sobre la página:

body::after {

Esta parte crea una especie de filtro luminoso:

background: radial-gradient(

 rgba(255, 192, 203, 0.08),

 rgba(255, 255, 255, 0.04)

);

No cambia el fondo de tu blog, solo añade una sensación más cálida.

Puedes modificar los colores para adaptarlo a tu estética.

Por ejemplo:

Más vintage:

rgba(220,190,150,0.08)

Más nocturno:

rgba(120,140,200,0.08)

Paso 7: Instalarlo en Blogger

1. Entra al panel de Blogger.
2. Ve a Diseño.
3. Ve a la sección Todas las columnas.
4. Pulsa Añadir un gadget.
5. Selecciona HTML/Javascript.
6. Pega todo el código completo.
7. Guarda los cambios.

Al volver a tu blog, los pétalos comenzarán a caer automáticamente.

Personalizaciones bonitas

Cambiar el estilo del movimiento

Busca:

@keyframes fall

Puedes modificar la caída para que sea:

• más rápida
• más lenta
• con más movimiento lateral

Cambiar la transparencia

Busca:

opacity:0.75;

Más transparente:

opacity:0.4;

Más visible:

opacity:1;


Cambiar la cantidad de viento
Busca:
Math.random() * 160 - 80
Un número mayor hará que los pétalos se muevan más hacia los lados.

Ideas para usar este gadget
Puedes adaptar este efecto para:
🌸 Un blog de primavera.

🍂 Un rincón otoñal.

❄️ Una decoración de invierno.

✨ Una página de cuentos o fantasía.

☕ Una zona de bienvenida.

📖 Un blog literario con ambiente tranquilo.

También podrías cambiarlo según la época del año:
Marzo → hojas secas

Abril → flores

Invierno → nieve

Navidad → pequeñas estrellas

La historia detrás del gadget

A veces los pequeños movimientos son los que hacen que un espacio digital se sienta más vivo.

Este gadget nació con la idea de agregar una sensación de calma al blog: como abrir una ventana durante una mañana tranquila y ver cómo algo pequeño pasa frente a nosotros llevado por el viento. No es un elemento que busque llamar demasiado la atención, sino acompañar la lectura y crear una pequeña atmósfera alrededor de las palabras, porque un blog no solo está hecho de textos e imágenes; también está formado por esos pequeños detalles que hacen que un visitante recuerde cómo se sintió al estar allí.

Código

<style>

/* =========================

   PARTÍCULAS

========================= */

.particle {

  position: fixed;

  top: -80px;

  pointer-events: none;

  z-index: 9999;

  opacity: 0.75;

}

/* imagen */

.particle img {

  width: 100%;

  height: 100%;

  display: block;

  filter: contrast(0.95) saturate(0.9);

}

/* caída con viento */

@keyframes fall {

  0% {

    transform: translateY(-10vh) translateX(0) rotate(0deg);

  }

  100% {

    transform: translateY(110vh) translateX(var(--wind)) rotate(var(--spin));

  }

}

/* =========================

   OVERLAY IGARI (NO rompe fondo del blog)

========================= */

body::after {

  content: "";

  position: fixed;

  inset: 0;

  pointer-events: none;

  z-index: 1;

  background: radial-gradient(

    rgba(255, 192, 203, 0.08),

    rgba(255, 255, 255, 0.04)

  );

}

</style>

<script>

const imageURL = "URL-DE-TU-IMAGEN";

/* 🌬️ viento dinámico global */

let windDirection = 30;

/* cambia dirección del viento cada 3s */

setInterval(() => {

  windDirection = (Math.random() * 160 - 80);

}, 3000);

function createParticle() {

  const el = document.createElement("div");

  el.classList.add("particle");

  /* 🌸 tamaño suave */

  const size = 14 + Math.random() * 16;

  el.style.width = size + "px";

  el.style.height = size + "px";

  el.style.left = Math.random() * window.innerWidth + "px";

  const duration = 7 + Math.random() * 10;

  /* 🌬️ viento individual */

  const wind = windDirection + (Math.random() * 50 - 25);

  /* 📖 rotación tipo hoja real */

  const spin = (Math.random() * 720 - 360);

  el.style.setProperty("--wind", wind + "px");

  el.style.setProperty("--spin", spin + "deg");

  el.style.animation = `fall ${duration}s linear forwards`;

  const img = document.createElement("img");

  img.src = imageURL;

  el.appendChild(img);

  document.body.appendChild(el);

  setTimeout(() => el.remove(), duration * 1000);

}

/* 🌸 menos partículas (estilo editorial) */

setInterval(createParticle, 900);

</script>

Hasta el próximo rincón creativo.
— Mañanas Lentas