How does a single box-shadow draw hundreds of stars?

box-shadow accepts a comma-separated list of shadows, and each one is just an x/y offset plus a color on a single 1px element. Listing hundreds of offsets paints hundreds of dots without a single extra DOM node, image, or canvas draw call.
How does the parallax drift loop seamlessly?

Each star layer is duplicated with a ::after pseudo-element positioned exactly one field-height below the original, using the same box-shadow list. Animating both together with translateY from 0 to -100% of that height means the duplicate slides into view just as the original slides out, so the loop has no visible seam.
Why are there three layers instead of one?

Each layer uses a different star size and drift duration — small and slow in the back, larger and faster in front — which reads as parallax depth, the same illusion used in classic CSS-only starfield backgrounds.
Will hundreds of box-shadow values hurt performance?

It's cheap to paint since it's one composited layer being translated, not hundreds of separately animated elements. Very high density (well above the default range here) can add measurable style-recalculation cost, so keep density modest on pages with a lot of other animation.
Does this tool store or upload my settings?

No — the star positions are generated with Math.random() and rendered entirely in your browser. Nothing is sent to a server.
CSS STARFIELD / DOTS GENERATOR

Scatter hundreds of points from a single box-shadow into a drifting, parallax starfield and copy the CSS.
Density: 1.00x
Drift speed: 1.00x
Star color
Parallax drift
.starfield {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #0b0a10;
}

.star-layer-1 {
  width: 1px;
  height: 1px;
  border-radius: 50%;
  background: transparent;
  box-shadow: 622px 1317px #f2e9dc, 302px 163px #f2e9dc, 93px 978px #f2e9dc, 1559px 1291px #f2e9dc, 827px 33px #f2e9dc, 721px 1545px #f2e9dc, 698px 457px #f2e9dc, 675px 682px #f2e9dc, 948px 1266px #f2e9dc, 1223px 1348px #f2e9dc, 1441px 653px #f2e9dc, 1489px 1325px #f2e9dc, 445px 1513px #f2e9dc, 98px 1045px #f2e9dc, 528px 656px #f2e9dc, 292px 647px #f2e9dc, 621px 95px #f2e9dc, 619px 1221px #f2e9dc, 429px 978px #f2e9dc, 1100px 545px #f2e9dc, 1401px 46px #f2e9dc, 230px 272px #f2e9dc, 1557px 730px #f2e9dc, 746px 250px #f2e9dc, 214px 1005px #f2e9dc, 1119px 437px #f2e9dc, 191px 694px #f2e9dc, 1119px 1129px #f2e9dc, 814px 435px #f2e9dc, 1096px 971px #f2e9dc, 1580px 1295px #f2e9dc, 1595px 1094px #f2e9dc, 502px 620px #f2e9dc, 173px 437px #f2e9dc, 420px 1266px #f2e9dc, 1375px 113px #f2e9dc, 92px 1441px #f2e9dc, 1536px 1470px #f2e9dc, 1420px 1305px #f2e9dc, 1229px 1009px #f2e9dc, 1255px 885px #f2e9dc, 99px 1444px #f2e9dc, 989px 1387px #f2e9dc, 999px 797px #f2e9dc, 1011px 807px #f2e9dc, 1253px 840px #f2e9dc, 58px 1182px #f2e9dc, 542px 282px #f2e9dc, 26px 815px #f2e9dc, 1597px 716px #f2e9dc, 1202px 235px #f2e9dc, 1497px 264px #f2e9dc, 1337px 889px #f2e9dc, 547px 1239px #f2e9dc, 1068px 357px #f2e9dc, 1033px 595px #f2e9dc, 1182px 258px #f2e9dc, 131px 36px #f2e9dc, 858px 363px #f2e9dc, 1486px 1541px #f2e9dc, 266px 414px #f2e9dc, 344px 518px #f2e9dc, 398px 1193px #f2e9dc, 1522px 1110px #f2e9dc, 1443px 691px #f2e9dc, 32px 1073px #f2e9dc, 173px 764px #f2e9dc, 573px 1576px #f2e9dc, 814px 482px #f2e9dc, 1109px 1174px #f2e9dc, 127px 1112px #f2e9dc, 235px 996px #f2e9dc, 1516px 345px #f2e9dc, 429px 655px #f2e9dc, 910px 592px #f2e9dc, 457px 441px #f2e9dc, 299px 1395px #f2e9dc, 299px 1176px #f2e9dc, 246px 1014px #f2e9dc, 302px 395px #f2e9dc, 677px 102px #f2e9dc, 970px 181px #f2e9dc, 1376px 421px #f2e9dc, 759px 1488px #f2e9dc, 228px 15px #f2e9dc, 846px 96px #f2e9dc, 663px 1262px #f2e9dc, 565px 1201px #f2e9dc, 1249px 1225px #f2e9dc, 1572px 598px #f2e9dc, 852px 1469px #f2e9dc, 585px 1460px #f2e9dc, 985px 1334px #f2e9dc, 422px 1149px #f2e9dc, 1125px 820px #f2e9dc, 412px 779px #f2e9dc, 169px 652px #f2e9dc, 136px 160px #f2e9dc, 1144px 1272px #f2e9dc, 1406px 1420px #f2e9dc, 420px 1401px #f2e9dc, 517px 1441px #f2e9dc, 1360px 861px #f2e9dc, 774px 535px #f2e9dc, 484px 1028px #f2e9dc, 1500px 759px #f2e9dc, 1534px 304px #f2e9dc, 1547px 1047px #f2e9dc, 869px 786px #f2e9dc, 1252px 1406px #f2e9dc, 995px 121px #f2e9dc, 716px 759px #f2e9dc, 1434px 1343px #f2e9dc, 476px 1013px #f2e9dc, 696px 625px #f2e9dc, 681px 1287px #f2e9dc, 90px 1254px #f2e9dc, 654px 305px #f2e9dc, 932px 44px #f2e9dc, 361px 605px #f2e9dc, 1188px 536px #f2e9dc, 445px 1044px #f2e9dc, 903px 753px #f2e9dc, 734px 1064px #f2e9dc, 1138px 1547px #f2e9dc, 1058px 428px #f2e9dc, 1556px 787px #f2e9dc, 620px 1240px #f2e9dc, 571px 4px #f2e9dc, 919px 1029px #f2e9dc, 1079px 1097px #f2e9dc, 486px 1313px #f2e9dc, 1093px 1375px #f2e9dc, 216px 1459px #f2e9dc, 284px 942px #f2e9dc, 612px 1114px #f2e9dc, 1532px 1024px #f2e9dc, 290px 1218px #f2e9dc, 1029px 1002px #f2e9dc, 1456px 118px #f2e9dc, 348px 1305px #f2e9dc, 802px 1438px #f2e9dc, 1488px 26px #f2e9dc, 1104px 1317px #f2e9dc, 694px 1504px #f2e9dc, 21px 245px #f2e9dc, 34px 172px #f2e9dc, 1599px 1262px #f2e9dc, 985px 753px #f2e9dc, 498px 1313px #f2e9dc, 1501px 315px #f2e9dc, 591px 888px #f2e9dc, 637px 1039px #f2e9dc, 908px 911px #f2e9dc, 1383px 804px #f2e9dc, 344px 1215px #f2e9dc, 685px 1575px #f2e9dc, 1452px 517px #f2e9dc, 711px 1019px #f2e9dc, 152px 998px #f2e9dc, 896px 441px #f2e9dc, 467px 897px #f2e9dc, 1322px 1238px #f2e9dc, 897px 185px #f2e9dc, 849px 1279px #f2e9dc, 1483px 391px #f2e9dc, 483px 682px #f2e9dc, 176px 130px #f2e9dc, 1094px 1444px #f2e9dc, 116px 868px #f2e9dc, 1495px 797px #f2e9dc, 1394px 588px #f2e9dc, 1110px 337px #f2e9dc, 339px 248px #f2e9dc, 163px 280px #f2e9dc, 1162px 836px #f2e9dc, 625px 1516px #f2e9dc, 1362px 722px #f2e9dc, 858px 1345px #f2e9dc, 823px 631px #f2e9dc, 446px 380px #f2e9dc, 687px 787px #f2e9dc, 1056px 353px #f2e9dc, 703px 902px #f2e9dc, 732px 214px #f2e9dc, 977px 621px #f2e9dc, 1223px 1320px #f2e9dc, 1167px 1084px #f2e9dc, 1212px 514px #f2e9dc, 1526px 870px #f2e9dc, 78px 1096px #f2e9dc, 524px 1096px #f2e9dc, 841px 1599px #f2e9dc, 321px 940px #f2e9dc, 207px 1292px #f2e9dc, 523px 1321px #f2e9dc, 1085px 178px #f2e9dc, 1318px 754px #f2e9dc, 1482px 736px #f2e9dc, 32px 190px #f2e9dc, 701px 449px #f2e9dc, 74px 985px #f2e9dc, 1451px 480px #f2e9dc, 1167px 125px #f2e9dc, 1192px 236px #f2e9dc, 562px 1164px #f2e9dc, 442px 73px #f2e9dc, 879px 480px #f2e9dc, 792px 1003px #f2e9dc, 688px 1108px #f2e9dc, 1084px 460px #f2e9dc, 202px 1506px #f2e9dc, 576px 21px #f2e9dc, 374px 421px #f2e9dc, 1162px 130px #f2e9dc, 459px 1224px #f2e9dc, 416px 1455px #f2e9dc, 539px 9px #f2e9dc, 880px 1374px #f2e9dc, 203px 430px #f2e9dc, 1555px 1083px #f2e9dc, 542px 1287px #f2e9dc, 179px 1174px #f2e9dc, 1480px 435px #f2e9dc, 530px 676px #f2e9dc, 457px 994px #f2e9dc, 263px 133px #f2e9dc, 540px 385px #f2e9dc, 678px 1033px #f2e9dc, 870px 317px #f2e9dc, 248px 492px #f2e9dc, 1027px 1048px #f2e9dc, 1526px 1233px #f2e9dc, 989px 1218px #f2e9dc, 1380px 819px #f2e9dc, 992px 1455px #f2e9dc, 723px 1504px #f2e9dc, 146px 1108px #f2e9dc, 791px 1334px #f2e9dc, 692px 773px #f2e9dc, 123px 681px #f2e9dc, 746px 540px #f2e9dc, 18px 485px #f2e9dc, 284px 1084px #f2e9dc, 696px 488px #f2e9dc, 314px 605px #f2e9dc, 725px 704px #f2e9dc, 1537px 1517px #f2e9dc, 701px 39px #f2e9dc, 1440px 1383px #f2e9dc, 1212px 1528px #f2e9dc, 72px 970px #f2e9dc, 1016px 206px #f2e9dc, 1356px 87px #f2e9dc, 828px 514px #f2e9dc, 1305px 991px #f2e9dc, 1444px 508px #f2e9dc, 1205px 1272px #f2e9dc, 795px 1194px #f2e9dc, 356px 1249px #f2e9dc, 580px 862px #f2e9dc, 1142px 408px #f2e9dc, 440px 1188px #f2e9dc, 281px 847px #f2e9dc, 155px 851px #f2e9dc, 1313px 1558px #f2e9dc, 644px 1315px #f2e9dc, 137px 983px #f2e9dc, 1501px 897px #f2e9dc, 1268px 177px #f2e9dc, 1335px 487px #f2e9dc, 622px 133px #f2e9dc, 479px 663px #f2e9dc, 1453px 156px #f2e9dc, 181px 205px #f2e9dc, 1526px 1287px #f2e9dc, 785px 233px #f2e9dc, 473px 767px #f2e9dc, 1108px 310px #f2e9dc, 468px 1018px #f2e9dc, 1444px 967px #f2e9dc, 843px 1005px #f2e9dc, 1352px 550px #f2e9dc, 191px 211px #f2e9dc, 259px 1000px #f2e9dc, 61px 176px #f2e9dc, 1009px 1590px #f2e9dc, 1445px 1194px #f2e9dc, 540px 749px #f2e9dc, 1326px 785px #f2e9dc, 741px 1364px #f2e9dc, 270px 1137px #f2e9dc, 501px 1469px #f2e9dc, 870px 1059px #f2e9dc, 1084px 690px #f2e9dc, 1430px 1131px #f2e9dc, 987px 156px #f2e9dc, 350px 1490px #f2e9dc, 213px 185px #f2e9dc, 1302px 304px #f2e9dc, 117px 171px #f2e9dc, 318px 727px #f2e9dc, 1508px 612px #f2e9dc, 141px 1591px #f2e9dc, 339px 315px #f2e9dc, 622px 1220px #f2e9dc, 931px 849px #f2e9dc, 461px 635px #f2e9dc, 385px 1270px #f2e9dc, 947px 746px #f2e9dc, 1271px 597px #f2e9dc, 1281px 642px #f2e9dc, 21px 374px #f2e9dc, 433px 1454px #f2e9dc, 1187px 1378px #f2e9dc, 729px 142px #f2e9dc, 193px 280px #f2e9dc, 576px 1157px #f2e9dc, 1382px 261px #f2e9dc, 1498px 365px #f2e9dc, 995px 181px #f2e9dc, 906px 1035px #f2e9dc, 235px 776px #f2e9dc, 1506px 102px #f2e9dc, 513px 1420px #f2e9dc, 1013px 750px #f2e9dc, 755px 49px #f2e9dc, 621px 853px #f2e9dc, 1343px 622px #f2e9dc, 1070px 1371px #f2e9dc, 272px 1251px #f2e9dc, 326px 984px #f2e9dc, 750px 1288px #f2e9dc, 1252px 1202px #f2e9dc, 17px 596px #f2e9dc, 572px 6px #f2e9dc, 139px 887px #f2e9dc, 1089px 1037px #f2e9dc, 1565px 1567px #f2e9dc, 477px 169px #f2e9dc, 103px 701px #f2e9dc, 285px 1309px #f2e9dc, 198px 470px #f2e9dc, 996px 245px #f2e9dc, 911px 155px #f2e9dc, 1117px 193px #f2e9dc, 166px 391px #f2e9dc, 348px 1336px #f2e9dc, 1250px 799px #f2e9dc, 1014px 1568px #f2e9dc, 1085px 649px #f2e9dc, 331px 394px #f2e9dc, 935px 117px #f2e9dc, 1521px 159px #f2e9dc, 572px 440px #f2e9dc, 689px 1421px #f2e9dc, 682px 144px #f2e9dc, 1365px 1398px #f2e9dc, 427px 1073px #f2e9dc, 1417px 920px #f2e9dc, 703px 343px #f2e9dc, 182px 558px #f2e9dc, 1251px 91px #f2e9dc, 205px 248px #f2e9dc, 818px 744px #f2e9dc, 712px 1418px #f2e9dc, 1407px 1320px #f2e9dc, 115px 362px #f2e9dc, 0px 811px #f2e9dc, 758px 167px #f2e9dc, 1327px 390px #f2e9dc, 1114px 972px #f2e9dc, 530px 501px #f2e9dc, 940px 1238px #f2e9dc, 215px 1440px #f2e9dc, 376px 24px #f2e9dc, 771px 969px #f2e9dc, 1285px 1072px #f2e9dc, 1265px 1059px #f2e9dc, 1084px 931px #f2e9dc, 1386px 1226px #f2e9dc, 1177px 527px #f2e9dc, 362px 1516px #f2e9dc, 471px 594px #f2e9dc, 755px 537px #f2e9dc, 15px 846px #f2e9dc, 1020px 345px #f2e9dc, 693px 914px #f2e9dc, 578px 796px #f2e9dc, 816px 12px #f2e9dc, 1456px 121px #f2e9dc, 741px 1581px #f2e9dc, 709px 1267px #f2e9dc, 247px 1247px #f2e9dc, 393px 1553px #f2e9dc, 1413px 1149px #f2e9dc, 243px 910px #f2e9dc, 337px 607px #f2e9dc, 335px 208px #f2e9dc, 862px 83px #f2e9dc, 385px 1279px #f2e9dc, 1194px 537px #f2e9dc, 1278px 302px #f2e9dc, 1406px 225px #f2e9dc, 390px 1487px #f2e9dc, 1266px 745px #f2e9dc, 124px 705px #f2e9dc, 1491px 351px #f2e9dc, 612px 375px #f2e9dc, 13px 1044px #f2e9dc, 417px 972px #f2e9dc, 1212px 221px #f2e9dc, 684px 152px #f2e9dc, 244px 359px #f2e9dc, 1069px 1288px #f2e9dc, 583px 970px #f2e9dc, 1558px 1225px #f2e9dc, 595px 868px #f2e9dc, 1486px 1361px #f2e9dc, 596px 597px #f2e9dc, 300px 1586px #f2e9dc, 850px 223px #f2e9dc, 669px 1597px #f2e9dc, 460px 397px #f2e9dc, 897px 579px #f2e9dc, 978px 1429px #f2e9dc, 223px 242px #f2e9dc, 97px 1493px #f2e9dc, 147px 731px #f2e9dc, 287px 155px #f2e9dc, 591px 477px #f2e9dc, 70px 747px #f2e9dc, 1330px 1083px #f2e9dc, 498px 1057px #f2e9dc, 648px 943px #f2e9dc, 508px 1412px #f2e9dc, 1295px 426px #f2e9dc, 988px 901px #f2e9dc, 517px 750px #f2e9dc, 825px 1451px #f2e9dc, 25px 215px #f2e9dc, 252px 1397px #f2e9dc, 1303px 600px #f2e9dc, 748px 1481px #f2e9dc, 345px 582px #f2e9dc, 244px 77px #f2e9dc, 478px 707px #f2e9dc, 779px 1218px #f2e9dc, 1584px 279px #f2e9dc, 1265px 693px #f2e9dc, 1450px 1431px #f2e9dc, 1058px 202px #f2e9dc, 532px 59px #f2e9dc, 466px 1166px #f2e9dc, 348px 1038px #f2e9dc, 134px 417px #f2e9dc, 1108px 1495px #f2e9dc, 751px 1415px #f2e9dc, 256px 295px #f2e9dc, 324px 454px #f2e9dc, 281px 236px #f2e9dc, 329px 197px #f2e9dc, 15px 1451px #f2e9dc, 781px 285px #f2e9dc, 520px 953px #f2e9dc, 351px 1462px #f2e9dc, 608px 437px #f2e9dc, 1358px 164px #f2e9dc, 818px 386px #f2e9dc, 902px 1101px #f2e9dc, 126px 261px #f2e9dc, 1092px 61px #f2e9dc, 1010px 1078px #f2e9dc, 434px 1173px #f2e9dc, 443px 90px #f2e9dc, 1531px 477px #f2e9dc, 1600px 1337px #f2e9dc, 1512px 1211px #f2e9dc, 1227px 123px #f2e9dc, 1550px 1405px #f2e9dc, 1326px 662px #f2e9dc, 508px 1410px #f2e9dc, 1438px 757px #f2e9dc, 431px 1102px #f2e9dc, 1313px 37px #f2e9dc, 1385px 840px #f2e9dc, 824px 451px #f2e9dc, 962px 364px #f2e9dc, 775px 153px #f2e9dc, 897px 732px #f2e9dc, 1129px 741px #f2e9dc, 1431px 262px #f2e9dc, 65px 31px #f2e9dc, 1423px 683px #f2e9dc, 806px 1038px #f2e9dc, 738px 543px #f2e9dc, 1391px 1356px #f2e9dc, 421px 325px #f2e9dc, 1039px 968px #f2e9dc, 1288px 811px #f2e9dc;
  animation: star-drift 130s linear infinite;
}

.star-layer-1::after {
  content: "";
  position: absolute;
  top: 1600px;
  width: 1px;
  height: 1px;
  border-radius: 50%;
  background: transparent;
  box-shadow: 622px 1317px #f2e9dc, 302px 163px #f2e9dc, 93px 978px #f2e9dc, 1559px 1291px #f2e9dc, 827px 33px #f2e9dc, 721px 1545px #f2e9dc, 698px 457px #f2e9dc, 675px 682px #f2e9dc, 948px 1266px #f2e9dc, 1223px 1348px #f2e9dc, 1441px 653px #f2e9dc, 1489px 1325px #f2e9dc, 445px 1513px #f2e9dc, 98px 1045px #f2e9dc, 528px 656px #f2e9dc, 292px 647px #f2e9dc, 621px 95px #f2e9dc, 619px 1221px #f2e9dc, 429px 978px #f2e9dc, 1100px 545px #f2e9dc, 1401px 46px #f2e9dc, 230px 272px #f2e9dc, 1557px 730px #f2e9dc, 746px 250px #f2e9dc, 214px 1005px #f2e9dc, 1119px 437px #f2e9dc, 191px 694px #f2e9dc, 1119px 1129px #f2e9dc, 814px 435px #f2e9dc, 1096px 971px #f2e9dc, 1580px 1295px #f2e9dc, 1595px 1094px #f2e9dc, 502px 620px #f2e9dc, 173px 437px #f2e9dc, 420px 1266px #f2e9dc, 1375px 113px #f2e9dc, 92px 1441px #f2e9dc, 1536px 1470px #f2e9dc, 1420px 1305px #f2e9dc, 1229px 1009px #f2e9dc, 1255px 885px #f2e9dc, 99px 1444px #f2e9dc, 989px 1387px #f2e9dc, 999px 797px #f2e9dc, 1011px 807px #f2e9dc, 1253px 840px #f2e9dc, 58px 1182px #f2e9dc, 542px 282px #f2e9dc, 26px 815px #f2e9dc, 1597px 716px #f2e9dc, 1202px 235px #f2e9dc, 1497px 264px #f2e9dc, 1337px 889px #f2e9dc, 547px 1239px #f2e9dc, 1068px 357px #f2e9dc, 1033px 595px #f2e9dc, 1182px 258px #f2e9dc, 131px 36px #f2e9dc, 858px 363px #f2e9dc, 1486px 1541px #f2e9dc, 266px 414px #f2e9dc, 344px 518px #f2e9dc, 398px 1193px #f2e9dc, 1522px 1110px #f2e9dc, 1443px 691px #f2e9dc, 32px 1073px #f2e9dc, 173px 764px #f2e9dc, 573px 1576px #f2e9dc, 814px 482px #f2e9dc, 1109px 1174px #f2e9dc, 127px 1112px #f2e9dc, 235px 996px #f2e9dc, 1516px 345px #f2e9dc, 429px 655px #f2e9dc, 910px 592px #f2e9dc, 457px 441px #f2e9dc, 299px 1395px #f2e9dc, 299px 1176px #f2e9dc, 246px 1014px #f2e9dc, 302px 395px #f2e9dc, 677px 102px #f2e9dc, 970px 181px #f2e9dc, 1376px 421px #f2e9dc, 759px 1488px #f2e9dc, 228px 15px #f2e9dc, 846px 96px #f2e9dc, 663px 1262px #f2e9dc, 565px 1201px #f2e9dc, 1249px 1225px #f2e9dc, 1572px 598px #f2e9dc, 852px 1469px #f2e9dc, 585px 1460px #f2e9dc, 985px 1334px #f2e9dc, 422px 1149px #f2e9dc, 1125px 820px #f2e9dc, 412px 779px #f2e9dc, 169px 652px #f2e9dc, 136px 160px #f2e9dc, 1144px 1272px #f2e9dc, 1406px 1420px #f2e9dc, 420px 1401px #f2e9dc, 517px 1441px #f2e9dc, 1360px 861px #f2e9dc, 774px 535px #f2e9dc, 484px 1028px #f2e9dc, 1500px 759px #f2e9dc, 1534px 304px #f2e9dc, 1547px 1047px #f2e9dc, 869px 786px #f2e9dc, 1252px 1406px #f2e9dc, 995px 121px #f2e9dc, 716px 759px #f2e9dc, 1434px 1343px #f2e9dc, 476px 1013px #f2e9dc, 696px 625px #f2e9dc, 681px 1287px #f2e9dc, 90px 1254px #f2e9dc, 654px 305px #f2e9dc, 932px 44px #f2e9dc, 361px 605px #f2e9dc, 1188px 536px #f2e9dc, 445px 1044px #f2e9dc, 903px 753px #f2e9dc, 734px 1064px #f2e9dc, 1138px 1547px #f2e9dc, 1058px 428px #f2e9dc, 1556px 787px #f2e9dc, 620px 1240px #f2e9dc, 571px 4px #f2e9dc, 919px 1029px #f2e9dc, 1079px 1097px #f2e9dc, 486px 1313px #f2e9dc, 1093px 1375px #f2e9dc, 216px 1459px #f2e9dc, 284px 942px #f2e9dc, 612px 1114px #f2e9dc, 1532px 1024px #f2e9dc, 290px 1218px #f2e9dc, 1029px 1002px #f2e9dc, 1456px 118px #f2e9dc, 348px 1305px #f2e9dc, 802px 1438px #f2e9dc, 1488px 26px #f2e9dc, 1104px 1317px #f2e9dc, 694px 1504px #f2e9dc, 21px 245px #f2e9dc, 34px 172px #f2e9dc, 1599px 1262px #f2e9dc, 985px 753px #f2e9dc, 498px 1313px #f2e9dc, 1501px 315px #f2e9dc, 591px 888px #f2e9dc, 637px 1039px #f2e9dc, 908px 911px #f2e9dc, 1383px 804px #f2e9dc, 344px 1215px #f2e9dc, 685px 1575px #f2e9dc, 1452px 517px #f2e9dc, 711px 1019px #f2e9dc, 152px 998px #f2e9dc, 896px 441px #f2e9dc, 467px 897px #f2e9dc, 1322px 1238px #f2e9dc, 897px 185px #f2e9dc, 849px 1279px #f2e9dc, 1483px 391px #f2e9dc, 483px 682px #f2e9dc, 176px 130px #f2e9dc, 1094px 1444px #f2e9dc, 116px 868px #f2e9dc, 1495px 797px #f2e9dc, 1394px 588px #f2e9dc, 1110px 337px #f2e9dc, 339px 248px #f2e9dc, 163px 280px #f2e9dc, 1162px 836px #f2e9dc, 625px 1516px #f2e9dc, 1362px 722px #f2e9dc, 858px 1345px #f2e9dc, 823px 631px #f2e9dc, 446px 380px #f2e9dc, 687px 787px #f2e9dc, 1056px 353px #f2e9dc, 703px 902px #f2e9dc, 732px 214px #f2e9dc, 977px 621px #f2e9dc, 1223px 1320px #f2e9dc, 1167px 1084px #f2e9dc, 1212px 514px #f2e9dc, 1526px 870px #f2e9dc, 78px 1096px #f2e9dc, 524px 1096px #f2e9dc, 841px 1599px #f2e9dc, 321px 940px #f2e9dc, 207px 1292px #f2e9dc, 523px 1321px #f2e9dc, 1085px 178px #f2e9dc, 1318px 754px #f2e9dc, 1482px 736px #f2e9dc, 32px 190px #f2e9dc, 701px 449px #f2e9dc, 74px 985px #f2e9dc, 1451px 480px #f2e9dc, 1167px 125px #f2e9dc, 1192px 236px #f2e9dc, 562px 1164px #f2e9dc, 442px 73px #f2e9dc, 879px 480px #f2e9dc, 792px 1003px #f2e9dc, 688px 1108px #f2e9dc, 1084px 460px #f2e9dc, 202px 1506px #f2e9dc, 576px 21px #f2e9dc, 374px 421px #f2e9dc, 1162px 130px #f2e9dc, 459px 1224px #f2e9dc, 416px 1455px #f2e9dc, 539px 9px #f2e9dc, 880px 1374px #f2e9dc, 203px 430px #f2e9dc, 1555px 1083px #f2e9dc, 542px 1287px #f2e9dc, 179px 1174px #f2e9dc, 1480px 435px #f2e9dc, 530px 676px #f2e9dc, 457px 994px #f2e9dc, 263px 133px #f2e9dc, 540px 385px #f2e9dc, 678px 1033px #f2e9dc, 870px 317px #f2e9dc, 248px 492px #f2e9dc, 1027px 1048px #f2e9dc, 1526px 1233px #f2e9dc, 989px 1218px #f2e9dc, 1380px 819px #f2e9dc, 992px 1455px #f2e9dc, 723px 1504px #f2e9dc, 146px 1108px #f2e9dc, 791px 1334px #f2e9dc, 692px 773px #f2e9dc, 123px 681px #f2e9dc, 746px 540px #f2e9dc, 18px 485px #f2e9dc, 284px 1084px #f2e9dc, 696px 488px #f2e9dc, 314px 605px #f2e9dc, 725px 704px #f2e9dc, 1537px 1517px #f2e9dc, 701px 39px #f2e9dc, 1440px 1383px #f2e9dc, 1212px 1528px #f2e9dc, 72px 970px #f2e9dc, 1016px 206px #f2e9dc, 1356px 87px #f2e9dc, 828px 514px #f2e9dc, 1305px 991px #f2e9dc, 1444px 508px #f2e9dc, 1205px 1272px #f2e9dc, 795px 1194px #f2e9dc, 356px 1249px #f2e9dc, 580px 862px #f2e9dc, 1142px 408px #f2e9dc, 440px 1188px #f2e9dc, 281px 847px #f2e9dc, 155px 851px #f2e9dc, 1313px 1558px #f2e9dc, 644px 1315px #f2e9dc, 137px 983px #f2e9dc, 1501px 897px #f2e9dc, 1268px 177px #f2e9dc, 1335px 487px #f2e9dc, 622px 133px #f2e9dc, 479px 663px #f2e9dc, 1453px 156px #f2e9dc, 181px 205px #f2e9dc, 1526px 1287px #f2e9dc, 785px 233px #f2e9dc, 473px 767px #f2e9dc, 1108px 310px #f2e9dc, 468px 1018px #f2e9dc, 1444px 967px #f2e9dc, 843px 1005px #f2e9dc, 1352px 550px #f2e9dc, 191px 211px #f2e9dc, 259px 1000px #f2e9dc, 61px 176px #f2e9dc, 1009px 1590px #f2e9dc, 1445px 1194px #f2e9dc, 540px 749px #f2e9dc, 1326px 785px #f2e9dc, 741px 1364px #f2e9dc, 270px 1137px #f2e9dc, 501px 1469px #f2e9dc, 870px 1059px #f2e9dc, 1084px 690px #f2e9dc, 1430px 1131px #f2e9dc, 987px 156px #f2e9dc, 350px 1490px #f2e9dc, 213px 185px #f2e9dc, 1302px 304px #f2e9dc, 117px 171px #f2e9dc, 318px 727px #f2e9dc, 1508px 612px #f2e9dc, 141px 1591px #f2e9dc, 339px 315px #f2e9dc, 622px 1220px #f2e9dc, 931px 849px #f2e9dc, 461px 635px #f2e9dc, 385px 1270px #f2e9dc, 947px 746px #f2e9dc, 1271px 597px #f2e9dc, 1281px 642px #f2e9dc, 21px 374px #f2e9dc, 433px 1454px #f2e9dc, 1187px 1378px #f2e9dc, 729px 142px #f2e9dc, 193px 280px #f2e9dc, 576px 1157px #f2e9dc, 1382px 261px #f2e9dc, 1498px 365px #f2e9dc, 995px 181px #f2e9dc, 906px 1035px #f2e9dc, 235px 776px #f2e9dc, 1506px 102px #f2e9dc, 513px 1420px #f2e9dc, 1013px 750px #f2e9dc, 755px 49px #f2e9dc, 621px 853px #f2e9dc, 1343px 622px #f2e9dc, 1070px 1371px #f2e9dc, 272px 1251px #f2e9dc, 326px 984px #f2e9dc, 750px 1288px #f2e9dc, 1252px 1202px #f2e9dc, 17px 596px #f2e9dc, 572px 6px #f2e9dc, 139px 887px #f2e9dc, 1089px 1037px #f2e9dc, 1565px 1567px #f2e9dc, 477px 169px #f2e9dc, 103px 701px #f2e9dc, 285px 1309px #f2e9dc, 198px 470px #f2e9dc, 996px 245px #f2e9dc, 911px 155px #f2e9dc, 1117px 193px #f2e9dc, 166px 391px #f2e9dc, 348px 1336px #f2e9dc, 1250px 799px #f2e9dc, 1014px 1568px #f2e9dc, 1085px 649px #f2e9dc, 331px 394px #f2e9dc, 935px 117px #f2e9dc, 1521px 159px #f2e9dc, 572px 440px #f2e9dc, 689px 1421px #f2e9dc, 682px 144px #f2e9dc, 1365px 1398px #f2e9dc, 427px 1073px #f2e9dc, 1417px 920px #f2e9dc, 703px 343px #f2e9dc, 182px 558px #f2e9dc, 1251px 91px #f2e9dc, 205px 248px #f2e9dc, 818px 744px #f2e9dc, 712px 1418px #f2e9dc, 1407px 1320px #f2e9dc, 115px 362px #f2e9dc, 0px 811px #f2e9dc, 758px 167px #f2e9dc, 1327px 390px #f2e9dc, 1114px 972px #f2e9dc, 530px 501px #f2e9dc, 940px 1238px #f2e9dc, 215px 1440px #f2e9dc, 376px 24px #f2e9dc, 771px 969px #f2e9dc, 1285px 1072px #f2e9dc, 1265px 1059px #f2e9dc, 1084px 931px #f2e9dc, 1386px 1226px #f2e9dc, 1177px 527px #f2e9dc, 362px 1516px #f2e9dc, 471px 594px #f2e9dc, 755px 537px #f2e9dc, 15px 846px #f2e9dc, 1020px 345px #f2e9dc, 693px 914px #f2e9dc, 578px 796px #f2e9dc, 816px 12px #f2e9dc, 1456px 121px #f2e9dc, 741px 1581px #f2e9dc, 709px 1267px #f2e9dc, 247px 1247px #f2e9dc, 393px 1553px #f2e9dc, 1413px 1149px #f2e9dc, 243px 910px #f2e9dc, 337px 607px #f2e9dc, 335px 208px #f2e9dc, 862px 83px #f2e9dc, 385px 1279px #f2e9dc, 1194px 537px #f2e9dc, 1278px 302px #f2e9dc, 1406px 225px #f2e9dc, 390px 1487px #f2e9dc, 1266px 745px #f2e9dc, 124px 705px #f2e9dc, 1491px 351px #f2e9dc, 612px 375px #f2e9dc, 13px 1044px #f2e9dc, 417px 972px #f2e9dc, 1212px 221px #f2e9dc, 684px 152px #f2e9dc, 244px 359px #f2e9dc, 1069px 1288px #f2e9dc, 583px 970px #f2e9dc, 1558px 1225px #f2e9dc, 595px 868px #f2e9dc, 1486px 1361px #f2e9dc, 596px 597px #f2e9dc, 300px 1586px #f2e9dc, 850px 223px #f2e9dc, 669px 1597px #f2e9dc, 460px 397px #f2e9dc, 897px 579px #f2e9dc, 978px 1429px #f2e9dc, 223px 242px #f2e9dc, 97px 1493px #f2e9dc, 147px 731px #f2e9dc, 287px 155px #f2e9dc, 591px 477px #f2e9dc, 70px 747px #f2e9dc, 1330px 1083px #f2e9dc, 498px 1057px #f2e9dc, 648px 943px #f2e9dc, 508px 1412px #f2e9dc, 1295px 426px #f2e9dc, 988px 901px #f2e9dc, 517px 750px #f2e9dc, 825px 1451px #f2e9dc, 25px 215px #f2e9dc, 252px 1397px #f2e9dc, 1303px 600px #f2e9dc, 748px 1481px #f2e9dc, 345px 582px #f2e9dc, 244px 77px #f2e9dc, 478px 707px #f2e9dc, 779px 1218px #f2e9dc, 1584px 279px #f2e9dc, 1265px 693px #f2e9dc, 1450px 1431px #f2e9dc, 1058px 202px #f2e9dc, 532px 59px #f2e9dc, 466px 1166px #f2e9dc, 348px 1038px #f2e9dc, 134px 417px #f2e9dc, 1108px 1495px #f2e9dc, 751px 1415px #f2e9dc, 256px 295px #f2e9dc, 324px 454px #f2e9dc, 281px 236px #f2e9dc, 329px 197px #f2e9dc, 15px 1451px #f2e9dc, 781px 285px #f2e9dc, 520px 953px #f2e9dc, 351px 1462px #f2e9dc, 608px 437px #f2e9dc, 1358px 164px #f2e9dc, 818px 386px #f2e9dc, 902px 1101px #f2e9dc, 126px 261px #f2e9dc, 1092px 61px #f2e9dc, 1010px 1078px #f2e9dc, 434px 1173px #f2e9dc, 443px 90px #f2e9dc, 1531px 477px #f2e9dc, 1600px 1337px #f2e9dc, 1512px 1211px #f2e9dc, 1227px 123px #f2e9dc, 1550px 1405px #f2e9dc, 1326px 662px #f2e9dc, 508px 1410px #f2e9dc, 1438px 757px #f2e9dc, 431px 1102px #f2e9dc, 1313px 37px #f2e9dc, 1385px 840px #f2e9dc, 824px 451px #f2e9dc, 962px 364px #f2e9dc, 775px 153px #f2e9dc, 897px 732px #f2e9dc, 1129px 741px #f2e9dc, 1431px 262px #f2e9dc, 65px 31px #f2e9dc, 1423px 683px #f2e9dc, 806px 1038px #f2e9dc, 738px 543px #f2e9dc, 1391px 1356px #f2e9dc, 421px 325px #f2e9dc, 1039px 968px #f2e9dc, 1288px 811px #f2e9dc;
}

.star-layer-2 {
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: transparent;
  box-shadow: 1160px 669px #f2e9dc, 201px 254px #f2e9dc, 724px 269px #f2e9dc, 373px 1183px #f2e9dc, 969px 638px #f2e9dc, 278px 647px #f2e9dc, 40px 1420px #f2e9dc, 1588px 268px #f2e9dc, 1304px 1427px #f2e9dc, 1215px 608px #f2e9dc, 201px 1220px #f2e9dc, 1324px 751px #f2e9dc, 1547px 1431px #f2e9dc, 358px 612px #f2e9dc, 1590px 1063px #f2e9dc, 571px 1058px #f2e9dc, 1207px 478px #f2e9dc, 539px 696px #f2e9dc, 124px 1366px #f2e9dc, 8px 1399px #f2e9dc, 923px 773px #f2e9dc, 127px 347px #f2e9dc, 213px 722px #f2e9dc, 526px 314px #f2e9dc, 1139px 513px #f2e9dc, 296px 284px #f2e9dc, 1584px 1015px #f2e9dc, 747px 118px #f2e9dc, 88px 1353px #f2e9dc, 388px 271px #f2e9dc, 1112px 486px #f2e9dc, 613px 646px #f2e9dc, 61px 1219px #f2e9dc, 510px 881px #f2e9dc, 828px 869px #f2e9dc, 990px 961px #f2e9dc, 369px 772px #f2e9dc, 383px 528px #f2e9dc, 1333px 1310px #f2e9dc, 1139px 559px #f2e9dc, 66px 118px #f2e9dc, 1002px 730px #f2e9dc, 1196px 120px #f2e9dc, 1017px 1420px #f2e9dc, 48px 716px #f2e9dc, 1172px 619px #f2e9dc, 1406px 322px #f2e9dc, 127px 397px #f2e9dc, 1237px 1247px #f2e9dc, 605px 1418px #f2e9dc, 1573px 1177px #f2e9dc, 148px 154px #f2e9dc, 1070px 1217px #f2e9dc, 743px 139px #f2e9dc, 634px 1483px #f2e9dc, 1539px 389px #f2e9dc, 835px 825px #f2e9dc, 1270px 698px #f2e9dc, 408px 90px #f2e9dc, 910px 169px #f2e9dc, 1154px 298px #f2e9dc, 900px 1526px #f2e9dc, 815px 421px #f2e9dc, 990px 380px #f2e9dc, 1000px 116px #f2e9dc, 166px 150px #f2e9dc, 293px 288px #f2e9dc, 7px 930px #f2e9dc, 1541px 1123px #f2e9dc, 8px 522px #f2e9dc, 933px 1322px #f2e9dc, 1157px 145px #f2e9dc, 365px 1174px #f2e9dc, 8px 48px #f2e9dc, 798px 1439px #f2e9dc, 680px 1119px #f2e9dc, 509px 1291px #f2e9dc, 107px 1287px #f2e9dc, 829px 1568px #f2e9dc, 1343px 935px #f2e9dc, 1269px 223px #f2e9dc, 887px 635px #f2e9dc, 1450px 914px #f2e9dc, 837px 1558px #f2e9dc, 713px 539px #f2e9dc, 122px 1208px #f2e9dc, 1179px 1350px #f2e9dc, 1367px 299px #f2e9dc, 1462px 385px #f2e9dc, 1176px 858px #f2e9dc, 1097px 1529px #f2e9dc, 967px 674px #f2e9dc, 1281px 1159px #f2e9dc, 1273px 638px #f2e9dc, 1239px 939px #f2e9dc, 285px 1252px #f2e9dc, 945px 774px #f2e9dc, 226px 901px #f2e9dc, 937px 1207px #f2e9dc, 936px 1178px #f2e9dc, 810px 1044px #f2e9dc, 112px 1428px #f2e9dc, 1515px 1164px #f2e9dc, 904px 1019px #f2e9dc, 989px 285px #f2e9dc, 653px 46px #f2e9dc, 1092px 78px #f2e9dc, 130px 235px #f2e9dc, 758px 134px #f2e9dc, 159px 1185px #f2e9dc, 1033px 718px #f2e9dc, 1585px 1269px #f2e9dc, 237px 164px #f2e9dc, 22px 411px #f2e9dc, 548px 1055px #f2e9dc, 812px 714px #f2e9dc, 351px 1423px #f2e9dc, 844px 1581px #f2e9dc, 203px 786px #f2e9dc, 877px 1453px #f2e9dc, 703px 145px #f2e9dc, 1565px 1008px #f2e9dc, 1095px 1318px #f2e9dc, 983px 291px #f2e9dc, 1334px 612px #f2e9dc, 1246px 1240px #f2e9dc, 1571px 194px #f2e9dc, 1483px 650px #f2e9dc, 813px 633px #f2e9dc, 637px 585px #f2e9dc, 535px 469px #f2e9dc, 1214px 1248px #f2e9dc, 1354px 819px #f2e9dc, 1299px 103px #f2e9dc, 665px 862px #f2e9dc, 237px 1364px #f2e9dc, 1263px 1233px #f2e9dc, 1163px 123px #f2e9dc, 265px 754px #f2e9dc, 1082px 300px #f2e9dc, 1472px 1409px #f2e9dc, 1248px 1201px #f2e9dc, 169px 370px #f2e9dc, 1041px 1521px #f2e9dc, 1357px 1284px #f2e9dc, 531px 511px #f2e9dc, 834px 6px #f2e9dc, 320px 151px #f2e9dc, 503px 71px #f2e9dc, 739px 1481px #f2e9dc;
  animation: star-drift 90s linear infinite;
}

.star-layer-2::after {
  content: "";
  position: absolute;
  top: 1600px;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: transparent;
  box-shadow: 1160px 669px #f2e9dc, 201px 254px #f2e9dc, 724px 269px #f2e9dc, 373px 1183px #f2e9dc, 969px 638px #f2e9dc, 278px 647px #f2e9dc, 40px 1420px #f2e9dc, 1588px 268px #f2e9dc, 1304px 1427px #f2e9dc, 1215px 608px #f2e9dc, 201px 1220px #f2e9dc, 1324px 751px #f2e9dc, 1547px 1431px #f2e9dc, 358px 612px #f2e9dc, 1590px 1063px #f2e9dc, 571px 1058px #f2e9dc, 1207px 478px #f2e9dc, 539px 696px #f2e9dc, 124px 1366px #f2e9dc, 8px 1399px #f2e9dc, 923px 773px #f2e9dc, 127px 347px #f2e9dc, 213px 722px #f2e9dc, 526px 314px #f2e9dc, 1139px 513px #f2e9dc, 296px 284px #f2e9dc, 1584px 1015px #f2e9dc, 747px 118px #f2e9dc, 88px 1353px #f2e9dc, 388px 271px #f2e9dc, 1112px 486px #f2e9dc, 613px 646px #f2e9dc, 61px 1219px #f2e9dc, 510px 881px #f2e9dc, 828px 869px #f2e9dc, 990px 961px #f2e9dc, 369px 772px #f2e9dc, 383px 528px #f2e9dc, 1333px 1310px #f2e9dc, 1139px 559px #f2e9dc, 66px 118px #f2e9dc, 1002px 730px #f2e9dc, 1196px 120px #f2e9dc, 1017px 1420px #f2e9dc, 48px 716px #f2e9dc, 1172px 619px #f2e9dc, 1406px 322px #f2e9dc, 127px 397px #f2e9dc, 1237px 1247px #f2e9dc, 605px 1418px #f2e9dc, 1573px 1177px #f2e9dc, 148px 154px #f2e9dc, 1070px 1217px #f2e9dc, 743px 139px #f2e9dc, 634px 1483px #f2e9dc, 1539px 389px #f2e9dc, 835px 825px #f2e9dc, 1270px 698px #f2e9dc, 408px 90px #f2e9dc, 910px 169px #f2e9dc, 1154px 298px #f2e9dc, 900px 1526px #f2e9dc, 815px 421px #f2e9dc, 990px 380px #f2e9dc, 1000px 116px #f2e9dc, 166px 150px #f2e9dc, 293px 288px #f2e9dc, 7px 930px #f2e9dc, 1541px 1123px #f2e9dc, 8px 522px #f2e9dc, 933px 1322px #f2e9dc, 1157px 145px #f2e9dc, 365px 1174px #f2e9dc, 8px 48px #f2e9dc, 798px 1439px #f2e9dc, 680px 1119px #f2e9dc, 509px 1291px #f2e9dc, 107px 1287px #f2e9dc, 829px 1568px #f2e9dc, 1343px 935px #f2e9dc, 1269px 223px #f2e9dc, 887px 635px #f2e9dc, 1450px 914px #f2e9dc, 837px 1558px #f2e9dc, 713px 539px #f2e9dc, 122px 1208px #f2e9dc, 1179px 1350px #f2e9dc, 1367px 299px #f2e9dc, 1462px 385px #f2e9dc, 1176px 858px #f2e9dc, 1097px 1529px #f2e9dc, 967px 674px #f2e9dc, 1281px 1159px #f2e9dc, 1273px 638px #f2e9dc, 1239px 939px #f2e9dc, 285px 1252px #f2e9dc, 945px 774px #f2e9dc, 226px 901px #f2e9dc, 937px 1207px #f2e9dc, 936px 1178px #f2e9dc, 810px 1044px #f2e9dc, 112px 1428px #f2e9dc, 1515px 1164px #f2e9dc, 904px 1019px #f2e9dc, 989px 285px #f2e9dc, 653px 46px #f2e9dc, 1092px 78px #f2e9dc, 130px 235px #f2e9dc, 758px 134px #f2e9dc, 159px 1185px #f2e9dc, 1033px 718px #f2e9dc, 1585px 1269px #f2e9dc, 237px 164px #f2e9dc, 22px 411px #f2e9dc, 548px 1055px #f2e9dc, 812px 714px #f2e9dc, 351px 1423px #f2e9dc, 844px 1581px #f2e9dc, 203px 786px #f2e9dc, 877px 1453px #f2e9dc, 703px 145px #f2e9dc, 1565px 1008px #f2e9dc, 1095px 1318px #f2e9dc, 983px 291px #f2e9dc, 1334px 612px #f2e9dc, 1246px 1240px #f2e9dc, 1571px 194px #f2e9dc, 1483px 650px #f2e9dc, 813px 633px #f2e9dc, 637px 585px #f2e9dc, 535px 469px #f2e9dc, 1214px 1248px #f2e9dc, 1354px 819px #f2e9dc, 1299px 103px #f2e9dc, 665px 862px #f2e9dc, 237px 1364px #f2e9dc, 1263px 1233px #f2e9dc, 1163px 123px #f2e9dc, 265px 754px #f2e9dc, 1082px 300px #f2e9dc, 1472px 1409px #f2e9dc, 1248px 1201px #f2e9dc, 169px 370px #f2e9dc, 1041px 1521px #f2e9dc, 1357px 1284px #f2e9dc, 531px 511px #f2e9dc, 834px 6px #f2e9dc, 320px 151px #f2e9dc, 503px 71px #f2e9dc, 739px 1481px #f2e9dc;
}

.star-layer-3 {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: transparent;
  box-shadow: 1568px 494px #f2e9dc, 1090px 302px #f2e9dc, 607px 380px #f2e9dc, 1170px 338px #f2e9dc, 1093px 644px #f2e9dc, 297px 642px #f2e9dc, 169px 527px #f2e9dc, 370px 1093px #f2e9dc, 1467px 60px #f2e9dc, 831px 1561px #f2e9dc, 818px 1467px #f2e9dc, 874px 1000px #f2e9dc, 1145px 744px #f2e9dc, 790px 565px #f2e9dc, 1355px 574px #f2e9dc, 3px 435px #f2e9dc, 1407px 1479px #f2e9dc, 1513px 1253px #f2e9dc, 724px 667px #f2e9dc, 1242px 1012px #f2e9dc, 1103px 1271px #f2e9dc, 1097px 415px #f2e9dc, 1562px 1138px #f2e9dc, 532px 605px #f2e9dc, 387px 180px #f2e9dc, 1146px 181px #f2e9dc, 1080px 1161px #f2e9dc, 709px 29px #f2e9dc, 1575px 343px #f2e9dc, 1447px 1375px #f2e9dc, 1197px 200px #f2e9dc, 100px 632px #f2e9dc, 1477px 1111px #f2e9dc, 1174px 591px #f2e9dc, 581px 81px #f2e9dc, 518px 16px #f2e9dc, 86px 1399px #f2e9dc, 131px 1354px #f2e9dc, 481px 732px #f2e9dc, 867px 1082px #f2e9dc, 1147px 429px #f2e9dc, 81px 386px #f2e9dc, 1216px 257px #f2e9dc, 1168px 590px #f2e9dc, 488px 905px #f2e9dc, 639px 1006px #f2e9dc, 1138px 1203px #f2e9dc, 829px 1193px #f2e9dc, 1109px 143px #f2e9dc, 1202px 1061px #f2e9dc, 195px 635px #f2e9dc, 1032px 702px #f2e9dc, 484px 468px #f2e9dc, 1329px 1133px #f2e9dc, 1502px 1581px #f2e9dc, 1090px 551px #f2e9dc, 73px 1315px #f2e9dc, 124px 567px #f2e9dc, 704px 476px #f2e9dc, 1413px 173px #f2e9dc, 632px 1281px #f2e9dc, 1287px 683px #f2e9dc, 1447px 1461px #f2e9dc, 883px 404px #f2e9dc, 89px 631px #f2e9dc, 756px 445px #f2e9dc, 1284px 672px #f2e9dc, 305px 424px #f2e9dc, 648px 1186px #f2e9dc, 121px 1158px #f2e9dc;
  animation: star-drift 55s linear infinite;
}

.star-layer-3::after {
  content: "";
  position: absolute;
  top: 1600px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: transparent;
  box-shadow: 1568px 494px #f2e9dc, 1090px 302px #f2e9dc, 607px 380px #f2e9dc, 1170px 338px #f2e9dc, 1093px 644px #f2e9dc, 297px 642px #f2e9dc, 169px 527px #f2e9dc, 370px 1093px #f2e9dc, 1467px 60px #f2e9dc, 831px 1561px #f2e9dc, 818px 1467px #f2e9dc, 874px 1000px #f2e9dc, 1145px 744px #f2e9dc, 790px 565px #f2e9dc, 1355px 574px #f2e9dc, 3px 435px #f2e9dc, 1407px 1479px #f2e9dc, 1513px 1253px #f2e9dc, 724px 667px #f2e9dc, 1242px 1012px #f2e9dc, 1103px 1271px #f2e9dc, 1097px 415px #f2e9dc, 1562px 1138px #f2e9dc, 532px 605px #f2e9dc, 387px 180px #f2e9dc, 1146px 181px #f2e9dc, 1080px 1161px #f2e9dc, 709px 29px #f2e9dc, 1575px 343px #f2e9dc, 1447px 1375px #f2e9dc, 1197px 200px #f2e9dc, 100px 632px #f2e9dc, 1477px 1111px #f2e9dc, 1174px 591px #f2e9dc, 581px 81px #f2e9dc, 518px 16px #f2e9dc, 86px 1399px #f2e9dc, 131px 1354px #f2e9dc, 481px 732px #f2e9dc, 867px 1082px #f2e9dc, 1147px 429px #f2e9dc, 81px 386px #f2e9dc, 1216px 257px #f2e9dc, 1168px 590px #f2e9dc, 488px 905px #f2e9dc, 639px 1006px #f2e9dc, 1138px 1203px #f2e9dc, 829px 1193px #f2e9dc, 1109px 143px #f2e9dc, 1202px 1061px #f2e9dc, 195px 635px #f2e9dc, 1032px 702px #f2e9dc, 484px 468px #f2e9dc, 1329px 1133px #f2e9dc, 1502px 1581px #f2e9dc, 1090px 551px #f2e9dc, 73px 1315px #f2e9dc, 124px 567px #f2e9dc, 704px 476px #f2e9dc, 1413px 173px #f2e9dc, 632px 1281px #f2e9dc, 1287px 683px #f2e9dc, 1447px 1461px #f2e9dc, 883px 404px #f2e9dc, 89px 631px #f2e9dc, 756px 445px #f2e9dc, 1284px 672px #f2e9dc, 305px 424px #f2e9dc, 648px 1186px #f2e9dc, 121px 1158px #f2e9dc;
}

@keyframes star-drift {
  from { transform: translateY(0); }
  to { transform: translateY(-1600px); }
}
How to build a CSS starfield background

1
Click Randomize stars to scatter a fresh set of points across three layers.
2
Adjust density and drift speed on the live preview.
3
Pick a star color, and toggle parallax drift on or off.
4
Copy the generated CSS and HTML and drop them into a dark hero or header section.
Questions

How does a single box-shadow draw hundreds of stars?: box-shadow accepts a comma-separated list of shadows, and each one is just an x/y offset plus a color on a single 1px element. Listing hundreds of offsets paints hundreds of dots without a single extra DOM node, image, or canvas draw call.
How does the parallax drift loop seamlessly?: Each star layer is duplicated with a ::after pseudo-element positioned exactly one field-height below the original, using the same box-shadow list. Animating both together with translateY from 0 to -100% of that height means the duplicate slides into view just as the original slides out, so the loop has no visible seam.
Why are there three layers instead of one?: Each layer uses a different star size and drift duration — small and slow in the back, larger and faster in front — which reads as parallax depth, the same illusion used in classic CSS-only starfield backgrounds.
Will hundreds of box-shadow values hurt performance?: It's cheap to paint since it's one composited layer being translated, not hundreds of separately animated elements. Very high density (well above the default range here) can add measurable style-recalculation cost, so keep density modest on pages with a lot of other animation.
Does this tool store or upload my settings?: No — the star positions are generated with Math.random() and rendered entirely in your browser. Nothing is sent to a server.