HTML + CSSBackgrounds
Fireflies
Little points of light float and blink over the glow of a dark forest, quiet and a bit magical.
Settings
1x
1x
1
Code
<div class="pt-fireflies"><b></b><i style="left:0.0%;top:79.8%;--z:6.5;--t:11.1s;--dl:-2.6s"></i><i style="left:59.8%;top:99.0%;--z:4.0;--t:8.1s;--dl:-8.8s"></i><i style="left:5.4%;top:92.2%;--z:4.8;--t:11.8s;--dl:-1.7s"></i><i style="left:12.4%;top:23.0%;--z:3.6;--t:6.4s;--dl:-5.7s"></i><i style="left:76.7%;top:50.9%;--z:4.5;--t:10.3s;--dl:-10.8s"></i><i style="left:6.6%;top:94.2%;--z:5.9;--t:11.9s;--dl:-10.2s"></i><i style="left:11.7%;top:15.5%;--z:5.0;--t:14.0s;--dl:-6.4s"></i><i style="left:89.3%;top:39.3%;--z:6.5;--t:12.5s;--dl:-9.4s"></i><i style="left:18.8%;top:68.9%;--z:3.7;--t:12.6s;--dl:-9.5s"></i><i style="left:52.6%;top:37.5%;--z:5.3;--t:11.8s;--dl:-2.3s"></i><i style="left:9.6%;top:17.8%;--z:7.0;--t:12.2s;--dl:-7.6s"></i><i style="left:49.7%;top:33.4%;--z:6.4;--t:6.7s;--dl:-3.8s"></i><i style="left:99.8%;top:65.6%;--z:6.4;--t:11.6s;--dl:-10.1s"></i><i style="left:37.4%;top:65.1%;--z:6.6;--t:13.2s;--dl:-7.7s"></i><i style="left:51.5%;top:20.7%;--z:6.3;--t:7.5s;--dl:-1.7s"></i><i style="left:75.3%;top:79.6%;--z:3.2;--t:13.9s;--dl:-2.4s"></i><i style="left:38.4%;top:68.8%;--z:4.3;--t:9.7s;--dl:-3.3s"></i><i style="left:22.0%;top:54.2%;--z:3.9;--t:13.9s;--dl:-9.2s"></i><i style="left:89.7%;top:51.8%;--z:4.5;--t:12.2s;--dl:-5.8s"></i><i style="left:76.6%;top:70.6%;--z:5.7;--t:11.2s;--dl:-10.1s"></i><i style="left:28.3%;top:85.2%;--z:3.1;--t:12.0s;--dl:-3.2s"></i><i style="left:0.5%;top:87.3%;--z:5.8;--t:7.8s;--dl:-6.6s"></i><i style="left:6.3%;top:75.7%;--z:5.6;--t:11.6s;--dl:-1.7s"></i><i style="left:68.3%;top:45.2%;--z:4.9;--t:6.1s;--dl:-10.3s"></i><i style="left:91.1%;top:80.1%;--z:3.3;--t:11.6s;--dl:-7.9s"></i><i style="left:90.6%;top:74.1%;--z:3.2;--t:12.4s;--dl:-9.4s"></i><i style="left:62.7%;top:73.9%;--z:3.6;--t:8.5s;--dl:-1.4s"></i><i style="left:14.2%;top:57.0%;--z:3.4;--t:8.6s;--dl:-10.6s"></i><i style="left:39.2%;top:20.4%;--z:5.7;--t:6.9s;--dl:-9.1s"></i><i style="left:58.4%;top:98.1%;--z:6.5;--t:8.4s;--dl:-3.6s"></i><i style="left:74.5%;top:30.6%;--z:5.6;--t:7.6s;--dl:-9.9s"></i><i style="left:21.5%;top:71.2%;--z:5.7;--t:6.4s;--dl:-12.1s"></i><i style="left:20.5%;top:15.4%;--z:3.7;--t:8.1s;--dl:-8.3s"></i><i style="left:93.5%;top:96.3%;--z:6.9;--t:13.2s;--dl:-8.6s"></i><i style="left:75.5%;top:65.9%;--z:6.7;--t:9.2s;--dl:-6.9s"></i><i style="left:67.2%;top:41.7%;--z:6.3;--t:9.6s;--dl:-7.9s"></i><i style="left:34.0%;top:57.4%;--z:7.0;--t:10.5s;--dl:-9.6s"></i><i style="left:52.0%;top:38.1%;--z:3.3;--t:8.0s;--dl:-1.1s"></i><i style="left:89.7%;top:68.1%;--z:5.4;--t:7.4s;--dl:-12.2s"></i><i style="left:70.7%;top:98.2%;--z:4.2;--t:7.8s;--dl:-4.5s"></i><i style="left:46.9%;top:78.4%;--z:5.9;--t:6.3s;--dl:-12.3s"></i><i style="left:7.6%;top:39.3%;--z:6.2;--t:7.4s;--dl:-9.7s"></i><i style="left:11.1%;top:49.7%;--z:4.0;--t:8.6s;--dl:-3.6s"></i><i style="left:2.8%;top:84.3%;--z:6.3;--t:10.6s;--dl:-5.6s"></i><i style="left:60.7%;top:17.1%;--z:5.9;--t:9.0s;--dl:-13.7s"></i></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Backgrounds
Where to use it
Fireflies set a warm, slightly dreamy mood. Try them on the invitation page of an outdoor wedding, the website of a summer festival, a bedtime story app or a glamping booking page. Each light drifts and fades on its own rhythm, so it never looks like a loop. A calm animated firefly background in HTML and CSS.
Warm yellows and greens on a very dark background give the most natural look; blue fireflies read more like fantasy. Serif headings in cream or soft white sit nicely on top without competing with the lights.