HTML + CSSFondos

Humo de colores

Nubes de color que se arremolinan y crecen despacio, como tinta en el agua o humo de escenario.

Ajustes

1x
1x
1

Código

<div class="pt-smoke"><i style="--cc:var(--c1);--x:-20.0%;--y:34.5%;--ox:89.6%;--oy:41.7%;--t:20.6s"></i><i style="--cc:var(--c2);--x:16.1%;--y:-11.6%;--ox:84.4%;--oy:86.7%;--t:29.0s"></i><i style="--cc:var(--c3);--x:4.9%;--y:2.5%;--ox:87.5%;--oy:42.5%;--t:26.5s"></i><i style="--cc:var(--c1);--x:56.8%;--y:3.7%;--ox:60.6%;--oy:44.4%;--t:24.6s"></i><i style="--cc:var(--c2);--x:24.3%;--y:6.2%;--ox:89.8%;--oy:52.7%;--t:31.6s"></i><i style="--cc:var(--c3);--x:42.2%;--y:-14.4%;--ox:32.7%;--oy:56.5%;--t:22.5s"></i><i style="--cc:var(--c1);--x:-13.5%;--y:4.4%;--ox:45.8%;--oy:30.6%;--t:27.3s"></i></div>

Prompt para IA

Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.

Versión Markdown con todo el código, para asistentes de IA

Más en Fondos

Ver todos: Fondos

Dónde usarlo

El humo de colores tiene un aire misterioso que funciona en el hero de una marca de perfumes, en la web de una coctelería o en el teaser de un disco nuevo. Siete nubes desenfocadas giran y se hinchan a distinta velocidad, y la mezcla nunca se repite igual. Un fondo de humo animado en CSS puro.

Brilla sobre fondo oscuro con dos o tres colores saturados; sobre blanco pierde casi todo el resplandor. Si pones texto encima, baja un poco la opacidad para que las nubes no se coman las letras finas.