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.
Más en 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.