Fondo de aurora boreal
Bandas de luz suaves que ondulan sobre un cielo estrellado, un fondo animado a pantalla completa en HTML y CSS.
Ajustes
Código
<div class="pt-aurora"><b></b><b></b><b></b><i style="left:0.0%;top:29.6%;--z:1.5;--t:-1.1s"></i><i style="left:59.8%;top:49.3%;--z:1.3;--t:-0.1s"></i><i style="left:3.8%;top:60.3%;--z:1.3;--t:-1.7s"></i><i style="left:49.3%;top:7.8%;--z:1.3;--t:-1.8s"></i><i style="left:1.3%;top:1.7%;--z:1.3;--t:-0.6s"></i><i style="left:25.2%;top:4.5%;--z:2.4;--t:-2.4s"></i><i style="left:53.9%;top:43.6%;--z:1.5;--t:-2.9s"></i><i style="left:24.8%;top:7.8%;--z:2.3;--t:-0.9s"></i><i style="left:78.7%;top:10.7%;--z:1.4;--t:-3.0s"></i><i style="left:89.8%;top:20.2%;--z:2.8;--t:-0.3s"></i><i style="left:74.1%;top:71.1%;--z:1.3;--t:-0.8s"></i><i style="left:95.5%;top:16.4%;--z:2.6;--t:-2.0s"></i><i style="left:81.8%;top:23.2%;--z:1.5;--t:-1.3s"></i><i style="left:71.3%;top:61.9%;--z:1.1;--t:-1.5s"></i><i style="left:46.0%;top:52.0%;--z:2.3;--t:-0.5s"></i><i style="left:71.4%;top:38.5%;--z:2.0;--t:-2.9s"></i><i style="left:96.0%;top:36.1%;--z:2.4;--t:-0.8s"></i><i style="left:84.3%;top:16.6%;--z:1.9;--t:-0.5s"></i><i style="left:83.1%;top:55.6%;--z:2.1;--t:-1.2s"></i><i style="left:82.3%;top:11.3%;--z:1.5;--t:-0.9s"></i><i style="left:48.3%;top:28.2%;--z:1.1;--t:-0.2s"></i><i style="left:60.5%;top:66.6%;--z:1.4;--t:-0.5s"></i><i style="left:99.8%;top:49.9%;--z:2.3;--t:-2.8s"></i><i style="left:5.3%;top:40.5%;--z:2.4;--t:-1.6s"></i><i style="left:23.6%;top:39.3%;--z:2.5;--t:-0.7s"></i><i style="left:61.2%;top:30.3%;--z:2.6;--t:-1.6s"></i><i style="left:46.1%;top:53.6%;--z:1.7;--t:-0.3s"></i><i style="left:60.3%;top:37.2%;--z:2.6;--t:-0.7s"></i><i style="left:66.4%;top:50.4%;--z:2.6;--t:-1.6s"></i><i style="left:47.9%;top:47.9%;--z:1.3;--t:-1.2s"></i><i style="left:27.3%;top:61.8%;--z:1.0;--t:-0.7s"></i><i style="left:8.1%;top:9.7%;--z:2.5;--t:-2.2s"></i><i style="left:54.3%;top:71.4%;--z:2.2;--t:-2.9s"></i><i style="left:45.1%;top:3.3%;--z:1.3;--t:-0.5s"></i><i style="left:49.9%;top:33.2%;--z:2.4;--t:-1.6s"></i><i style="left:77.0%;top:65.0%;--z:2.2;--t:-1.3s"></i><i style="left:95.0%;top:17.0%;--z:1.8;--t:-2.1s"></i><i style="left:75.6%;top:34.9%;--z:1.7;--t:-2.6s"></i><i style="left:37.8%;top:44.9%;--z:2.7;--t:-2.7s"></i><i style="left:38.0%;top:71.5%;--z:2.6;--t:-1.2s"></i><i style="left:74.4%;top:32.2%;--z:1.3;--t:-1.8s"></i><i style="left:8.5%;top:52.9%;--z:1.5;--t:-1.3s"></i><i style="left:84.2%;top:17.3%;--z:1.7;--t:-2.0s"></i><i style="left:27.7%;top:36.5%;--z:1.4;--t:-0.3s"></i><i style="left:75.9%;top:30.4%;--z:1.6;--t:-1.1s"></i><i style="left:4.9%;top:26.8%;--z:1.8;--t:-2.4s"></i><i style="left:95.5%;top:48.4%;--z:1.1;--t:-2.2s"></i><i style="left:75.0%;top:43.7%;--z:1.7;--t:-1.6s"></i><i style="left:80.1%;top:34.0%;--z:1.5;--t:-1.2s"></i><i style="left:85.4%;top:67.4%;--z:1.6;--t:-1.4s"></i><i style="left:6.7%;top:8.0%;--z:2.7;--t:-2.6s"></i><i style="left:55.4%;top:65.1%;--z:2.1;--t:-1.6s"></i><i style="left:31.0%;top:18.2%;--z:2.3;--t:-1.9s"></i><i style="left:32.0%;top:14.2%;--z:2.1;--t:-0.4s"></i><i style="left:40.2%;top:9.0%;--z:1.4;--t:-0.2s"></i><i style="left:65.8%;top:43.1%;--z:1.7;--t:-0.6s"></i><i style="left:14.0%;top:35.0%;--z:1.0;--t:-0.1s"></i><i style="left:59.9%;top:56.2%;--z:2.1;--t:-2.0s"></i><i style="left:63.2%;top:31.3%;--z:1.6;--t:-2.9s"></i><i style="left:64.7%;top:25.4%;--z:2.7;--t:-1.6s"></i><i style="left:64.5%;top:23.9%;--z:1.7;--t:-1.3s"></i><i style="left:9.5%;top:47.6%;--z:2.8;--t:-1.4s"></i><i style="left:89.1%;top:63.7%;--z:1.0;--t:-0.0s"></i><i style="left:32.0%;top:13.7%;--z:2.7;--t:-0.8s"></i><i style="left:4.7%;top:3.1%;--z:2.1;--t:-1.5s"></i><i style="left:12.7%;top:36.5%;--z:1.5;--t:-0.7s"></i><i style="left:29.2%;top:66.7%;--z:2.2;--t:-1.9s"></i><i style="left:24.3%;top:12.5%;--z:2.5;--t:-2.5s"></i><i style="left:17.0%;top:60.6%;--z:1.1;--t:-2.6s"></i><i style="left:33.1%;top:26.4%;--z:1.5;--t:-2.5s"></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
Ver todos: FondosDónde usarlo
Este fondo de aurora boreal funciona como portada al instante para todo lo que tenga que ver con cielos nocturnos y calma: una agencia que vende viajes a Laponia para ver auroras, la landing de una app para dormir o meditar, o la página de un evento de astronomía. Las bandas se mueven despacio mientras titilan las estrellas.
Si pones un titular encima, baja un poco la opacidad o la velocidad para que el texto sea el protagonista. Verdes con violeta recuerdan a una aurora real; con los colores de tu marca se convierte en un fondo degradado más suave y abstracto.