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.

In short

Generate a drifting starfield background from hundreds of points on a single box-shadow, layered into three parallax speeds — adjust density, drift speed, and color, then copy the CSS. No canvas, no images, runs entirely in your browser.

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: 1003px 4px #f2e9dc, 844px 1570px #f2e9dc, 1549px 450px #f2e9dc, 981px 1153px #f2e9dc, 681px 1592px #f2e9dc, 728px 782px #f2e9dc, 222px 646px #f2e9dc, 396px 247px #f2e9dc, 783px 108px #f2e9dc, 631px 1227px #f2e9dc, 457px 305px #f2e9dc, 68px 684px #f2e9dc, 945px 1278px #f2e9dc, 472px 329px #f2e9dc, 1053px 874px #f2e9dc, 1214px 309px #f2e9dc, 1154px 727px #f2e9dc, 1233px 1591px #f2e9dc, 383px 1211px #f2e9dc, 245px 517px #f2e9dc, 661px 399px #f2e9dc, 243px 1162px #f2e9dc, 922px 204px #f2e9dc, 423px 78px #f2e9dc, 996px 1385px #f2e9dc, 382px 1583px #f2e9dc, 1149px 644px #f2e9dc, 484px 1084px #f2e9dc, 1524px 1477px #f2e9dc, 1108px 1470px #f2e9dc, 1335px 1494px #f2e9dc, 184px 63px #f2e9dc, 1390px 471px #f2e9dc, 1410px 816px #f2e9dc, 1497px 1127px #f2e9dc, 266px 1083px #f2e9dc, 1518px 211px #f2e9dc, 1565px 261px #f2e9dc, 621px 188px #f2e9dc, 642px 519px #f2e9dc, 1052px 815px #f2e9dc, 850px 122px #f2e9dc, 1293px 1367px #f2e9dc, 436px 263px #f2e9dc, 485px 1430px #f2e9dc, 464px 230px #f2e9dc, 1047px 878px #f2e9dc, 519px 192px #f2e9dc, 226px 108px #f2e9dc, 481px 1081px #f2e9dc, 1042px 187px #f2e9dc, 813px 837px #f2e9dc, 339px 1268px #f2e9dc, 404px 1587px #f2e9dc, 1526px 1392px #f2e9dc, 6px 293px #f2e9dc, 45px 1575px #f2e9dc, 528px 1153px #f2e9dc, 1385px 150px #f2e9dc, 401px 1392px #f2e9dc, 1272px 1267px #f2e9dc, 353px 154px #f2e9dc, 239px 654px #f2e9dc, 868px 460px #f2e9dc, 1415px 500px #f2e9dc, 1455px 1379px #f2e9dc, 1013px 1071px #f2e9dc, 375px 614px #f2e9dc, 492px 327px #f2e9dc, 424px 1490px #f2e9dc, 1546px 256px #f2e9dc, 527px 123px #f2e9dc, 59px 1254px #f2e9dc, 619px 390px #f2e9dc, 237px 1314px #f2e9dc, 493px 1428px #f2e9dc, 841px 685px #f2e9dc, 1098px 552px #f2e9dc, 392px 858px #f2e9dc, 1220px 1271px #f2e9dc, 81px 334px #f2e9dc, 1011px 1034px #f2e9dc, 48px 522px #f2e9dc, 687px 1395px #f2e9dc, 1038px 574px #f2e9dc, 567px 962px #f2e9dc, 22px 1478px #f2e9dc, 864px 909px #f2e9dc, 1028px 199px #f2e9dc, 112px 1303px #f2e9dc, 226px 1137px #f2e9dc, 442px 1026px #f2e9dc, 470px 873px #f2e9dc, 1481px 115px #f2e9dc, 176px 277px #f2e9dc, 1089px 73px #f2e9dc, 845px 608px #f2e9dc, 1244px 421px #f2e9dc, 134px 1598px #f2e9dc, 1564px 23px #f2e9dc, 1377px 180px #f2e9dc, 626px 972px #f2e9dc, 838px 615px #f2e9dc, 1140px 215px #f2e9dc, 455px 1545px #f2e9dc, 990px 866px #f2e9dc, 68px 262px #f2e9dc, 998px 380px #f2e9dc, 249px 1024px #f2e9dc, 979px 31px #f2e9dc, 108px 50px #f2e9dc, 643px 1083px #f2e9dc, 1045px 1277px #f2e9dc, 1032px 1079px #f2e9dc, 1533px 36px #f2e9dc, 1388px 1471px #f2e9dc, 42px 1318px #f2e9dc, 866px 903px #f2e9dc, 600px 172px #f2e9dc, 134px 1095px #f2e9dc, 601px 24px #f2e9dc, 810px 881px #f2e9dc, 1098px 1378px #f2e9dc, 795px 1227px #f2e9dc, 105px 639px #f2e9dc, 1177px 325px #f2e9dc, 1400px 1249px #f2e9dc, 154px 294px #f2e9dc, 1124px 54px #f2e9dc, 1283px 1532px #f2e9dc, 538px 1457px #f2e9dc, 1360px 1005px #f2e9dc, 749px 958px #f2e9dc, 698px 328px #f2e9dc, 231px 1501px #f2e9dc, 1034px 74px #f2e9dc, 957px 946px #f2e9dc, 251px 245px #f2e9dc, 1527px 437px #f2e9dc, 20px 792px #f2e9dc, 525px 1562px #f2e9dc, 1009px 768px #f2e9dc, 4px 1013px #f2e9dc, 52px 1257px #f2e9dc, 1556px 287px #f2e9dc, 1036px 1417px #f2e9dc, 942px 936px #f2e9dc, 649px 984px #f2e9dc, 909px 1255px #f2e9dc, 1395px 627px #f2e9dc, 1215px 1145px #f2e9dc, 387px 255px #f2e9dc, 1428px 616px #f2e9dc, 1525px 812px #f2e9dc, 1028px 688px #f2e9dc, 178px 1218px #f2e9dc, 1004px 1237px #f2e9dc, 198px 12px #f2e9dc, 1258px 1249px #f2e9dc, 354px 510px #f2e9dc, 1193px 55px #f2e9dc, 375px 86px #f2e9dc, 489px 1499px #f2e9dc, 506px 652px #f2e9dc, 1074px 231px #f2e9dc, 1031px 1271px #f2e9dc, 1060px 753px #f2e9dc, 163px 653px #f2e9dc, 1465px 742px #f2e9dc, 1456px 1595px #f2e9dc, 972px 316px #f2e9dc, 1022px 992px #f2e9dc, 951px 1453px #f2e9dc, 588px 1462px #f2e9dc, 77px 719px #f2e9dc, 389px 22px #f2e9dc, 806px 736px #f2e9dc, 1273px 492px #f2e9dc, 1294px 1450px #f2e9dc, 679px 300px #f2e9dc, 887px 862px #f2e9dc, 599px 1538px #f2e9dc, 1042px 824px #f2e9dc, 775px 65px #f2e9dc, 643px 311px #f2e9dc, 881px 60px #f2e9dc, 892px 545px #f2e9dc, 898px 363px #f2e9dc, 222px 439px #f2e9dc, 490px 466px #f2e9dc, 1007px 937px #f2e9dc, 126px 623px #f2e9dc, 272px 1250px #f2e9dc, 863px 328px #f2e9dc, 775px 8px #f2e9dc, 233px 567px #f2e9dc, 936px 1567px #f2e9dc, 602px 973px #f2e9dc, 828px 646px #f2e9dc, 627px 109px #f2e9dc, 969px 1041px #f2e9dc, 801px 52px #f2e9dc, 500px 133px #f2e9dc, 1013px 1581px #f2e9dc, 1468px 775px #f2e9dc, 1279px 788px #f2e9dc, 32px 414px #f2e9dc, 1485px 79px #f2e9dc, 554px 1342px #f2e9dc, 1377px 631px #f2e9dc, 1208px 1316px #f2e9dc, 999px 288px #f2e9dc, 94px 287px #f2e9dc, 1000px 775px #f2e9dc, 818px 725px #f2e9dc, 528px 1006px #f2e9dc, 1240px 1309px #f2e9dc, 136px 1402px #f2e9dc, 877px 563px #f2e9dc, 1400px 818px #f2e9dc, 560px 577px #f2e9dc, 1320px 904px #f2e9dc, 1358px 352px #f2e9dc, 1429px 664px #f2e9dc, 1197px 213px #f2e9dc, 473px 516px #f2e9dc, 1108px 588px #f2e9dc, 808px 751px #f2e9dc, 539px 1134px #f2e9dc, 1118px 1571px #f2e9dc, 117px 1561px #f2e9dc, 468px 157px #f2e9dc, 622px 1063px #f2e9dc, 614px 848px #f2e9dc, 583px 1133px #f2e9dc, 1465px 1193px #f2e9dc, 157px 522px #f2e9dc, 463px 280px #f2e9dc, 850px 86px #f2e9dc, 116px 527px #f2e9dc, 662px 451px #f2e9dc, 1070px 365px #f2e9dc, 70px 1049px #f2e9dc, 880px 1563px #f2e9dc, 1283px 621px #f2e9dc, 779px 933px #f2e9dc, 1029px 114px #f2e9dc, 1023px 579px #f2e9dc, 424px 1200px #f2e9dc, 1412px 534px #f2e9dc, 1216px 1425px #f2e9dc, 1578px 1354px #f2e9dc, 1320px 704px #f2e9dc, 666px 348px #f2e9dc, 1437px 1178px #f2e9dc, 77px 399px #f2e9dc, 1342px 1001px #f2e9dc, 1228px 9px #f2e9dc, 1025px 927px #f2e9dc, 76px 365px #f2e9dc, 72px 1160px #f2e9dc, 118px 1425px #f2e9dc, 318px 614px #f2e9dc, 70px 1005px #f2e9dc, 1095px 1385px #f2e9dc, 1475px 117px #f2e9dc, 1454px 1039px #f2e9dc, 986px 503px #f2e9dc, 86px 1296px #f2e9dc, 304px 1092px #f2e9dc, 1430px 465px #f2e9dc, 647px 1524px #f2e9dc, 1397px 201px #f2e9dc, 1243px 144px #f2e9dc, 891px 576px #f2e9dc, 264px 156px #f2e9dc, 307px 650px #f2e9dc, 890px 221px #f2e9dc, 1512px 526px #f2e9dc, 81px 706px #f2e9dc, 322px 551px #f2e9dc, 5px 1019px #f2e9dc, 1536px 1556px #f2e9dc, 369px 1261px #f2e9dc, 887px 396px #f2e9dc, 1424px 91px #f2e9dc, 125px 100px #f2e9dc, 639px 1324px #f2e9dc, 1059px 467px #f2e9dc, 577px 716px #f2e9dc, 614px 947px #f2e9dc, 760px 1189px #f2e9dc, 1114px 1139px #f2e9dc, 93px 712px #f2e9dc, 672px 676px #f2e9dc, 1365px 1126px #f2e9dc, 341px 1534px #f2e9dc, 1148px 1456px #f2e9dc, 274px 1560px #f2e9dc, 36px 750px #f2e9dc, 246px 994px #f2e9dc, 102px 979px #f2e9dc, 199px 198px #f2e9dc, 545px 713px #f2e9dc, 433px 996px #f2e9dc, 150px 226px #f2e9dc, 436px 1102px #f2e9dc, 1308px 768px #f2e9dc, 761px 1591px #f2e9dc, 1211px 115px #f2e9dc, 1528px 188px #f2e9dc, 326px 860px #f2e9dc, 904px 950px #f2e9dc, 161px 579px #f2e9dc, 1066px 1102px #f2e9dc, 551px 840px #f2e9dc, 1134px 1539px #f2e9dc, 1043px 1451px #f2e9dc, 1205px 1195px #f2e9dc, 523px 1407px #f2e9dc, 1273px 796px #f2e9dc, 533px 1287px #f2e9dc, 1501px 1459px #f2e9dc, 102px 1348px #f2e9dc, 776px 632px #f2e9dc, 225px 673px #f2e9dc, 729px 361px #f2e9dc, 815px 1565px #f2e9dc, 876px 64px #f2e9dc, 1591px 857px #f2e9dc, 1095px 26px #f2e9dc, 1249px 1299px #f2e9dc, 1249px 1483px #f2e9dc, 1440px 1065px #f2e9dc, 52px 1096px #f2e9dc, 740px 1541px #f2e9dc, 891px 999px #f2e9dc, 278px 1195px #f2e9dc, 288px 834px #f2e9dc, 416px 320px #f2e9dc, 615px 163px #f2e9dc, 57px 649px #f2e9dc, 100px 1016px #f2e9dc, 266px 476px #f2e9dc, 721px 1376px #f2e9dc, 882px 1538px #f2e9dc, 593px 597px #f2e9dc, 807px 480px #f2e9dc, 615px 934px #f2e9dc, 717px 793px #f2e9dc, 191px 442px #f2e9dc, 905px 66px #f2e9dc, 235px 376px #f2e9dc, 976px 574px #f2e9dc, 80px 1496px #f2e9dc, 72px 140px #f2e9dc, 1369px 291px #f2e9dc, 218px 1184px #f2e9dc, 936px 1188px #f2e9dc, 357px 1090px #f2e9dc, 556px 1531px #f2e9dc, 1213px 386px #f2e9dc, 412px 532px #f2e9dc, 435px 1061px #f2e9dc, 5px 407px #f2e9dc, 1593px 695px #f2e9dc, 486px 1078px #f2e9dc, 1193px 485px #f2e9dc, 1123px 1584px #f2e9dc, 1107px 126px #f2e9dc, 1054px 427px #f2e9dc, 758px 617px #f2e9dc, 1576px 811px #f2e9dc, 656px 1522px #f2e9dc, 119px 647px #f2e9dc, 1282px 1526px #f2e9dc, 150px 1016px #f2e9dc, 422px 1533px #f2e9dc, 205px 124px #f2e9dc, 935px 191px #f2e9dc, 1067px 491px #f2e9dc, 42px 558px #f2e9dc, 597px 1199px #f2e9dc, 1240px 877px #f2e9dc, 1149px 1589px #f2e9dc, 418px 1533px #f2e9dc, 666px 1049px #f2e9dc, 466px 1283px #f2e9dc, 742px 1192px #f2e9dc, 974px 1083px #f2e9dc, 1287px 427px #f2e9dc, 544px 488px #f2e9dc, 1179px 1025px #f2e9dc, 603px 1284px #f2e9dc, 1099px 25px #f2e9dc, 1080px 1584px #f2e9dc, 1145px 632px #f2e9dc, 264px 1232px #f2e9dc, 547px 1327px #f2e9dc, 381px 1233px #f2e9dc, 291px 1087px #f2e9dc, 32px 576px #f2e9dc, 461px 641px #f2e9dc, 1126px 141px #f2e9dc, 712px 746px #f2e9dc, 336px 1129px #f2e9dc, 348px 1562px #f2e9dc, 275px 1446px #f2e9dc, 1035px 1265px #f2e9dc, 502px 515px #f2e9dc, 217px 604px #f2e9dc, 1334px 1042px #f2e9dc, 363px 1043px #f2e9dc, 960px 594px #f2e9dc, 1589px 705px #f2e9dc, 1261px 1403px #f2e9dc, 943px 1107px #f2e9dc, 1043px 1357px #f2e9dc, 1447px 1464px #f2e9dc, 1373px 1076px #f2e9dc, 707px 336px #f2e9dc, 348px 1365px #f2e9dc, 221px 354px #f2e9dc, 926px 28px #f2e9dc, 1466px 1217px #f2e9dc, 1359px 941px #f2e9dc, 465px 1482px #f2e9dc, 300px 1057px #f2e9dc, 159px 1156px #f2e9dc, 1120px 426px #f2e9dc, 1126px 890px #f2e9dc, 1407px 445px #f2e9dc, 444px 566px #f2e9dc, 1189px 1020px #f2e9dc, 1075px 34px #f2e9dc, 1438px 1306px #f2e9dc, 382px 961px #f2e9dc, 313px 263px #f2e9dc, 508px 149px #f2e9dc, 266px 937px #f2e9dc, 421px 636px #f2e9dc, 1072px 1422px #f2e9dc, 512px 1447px #f2e9dc, 714px 789px #f2e9dc, 1560px 660px #f2e9dc, 1456px 849px #f2e9dc, 666px 42px #f2e9dc, 599px 755px #f2e9dc, 501px 831px #f2e9dc, 983px 1553px #f2e9dc, 506px 3px #f2e9dc, 1125px 81px #f2e9dc, 236px 1398px #f2e9dc, 1414px 1283px #f2e9dc, 1058px 1565px #f2e9dc, 13px 1176px #f2e9dc, 38px 250px #f2e9dc, 804px 367px #f2e9dc, 908px 1336px #f2e9dc, 574px 1535px #f2e9dc, 192px 25px #f2e9dc, 808px 1037px #f2e9dc, 1054px 539px #f2e9dc, 35px 903px #f2e9dc, 1319px 1347px #f2e9dc, 768px 176px #f2e9dc, 290px 119px #f2e9dc, 828px 198px #f2e9dc, 867px 823px #f2e9dc, 1266px 306px #f2e9dc, 1281px 546px #f2e9dc, 804px 645px #f2e9dc, 623px 1464px #f2e9dc, 572px 692px #f2e9dc, 765px 1324px #f2e9dc, 1323px 1192px #f2e9dc, 1307px 487px #f2e9dc, 1313px 1368px #f2e9dc, 978px 181px #f2e9dc, 20px 1335px #f2e9dc, 955px 1301px #f2e9dc, 1170px 769px #f2e9dc, 906px 1430px #f2e9dc, 560px 746px #f2e9dc, 300px 675px #f2e9dc, 870px 822px #f2e9dc, 331px 620px #f2e9dc, 731px 1489px #f2e9dc, 515px 911px #f2e9dc, 1071px 103px #f2e9dc, 1311px 1422px #f2e9dc, 792px 1475px #f2e9dc, 78px 567px #f2e9dc, 1600px 1323px #f2e9dc, 391px 1208px #f2e9dc, 710px 963px #f2e9dc, 192px 1050px #f2e9dc, 438px 819px #f2e9dc, 452px 394px #f2e9dc, 842px 198px #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: 1003px 4px #f2e9dc, 844px 1570px #f2e9dc, 1549px 450px #f2e9dc, 981px 1153px #f2e9dc, 681px 1592px #f2e9dc, 728px 782px #f2e9dc, 222px 646px #f2e9dc, 396px 247px #f2e9dc, 783px 108px #f2e9dc, 631px 1227px #f2e9dc, 457px 305px #f2e9dc, 68px 684px #f2e9dc, 945px 1278px #f2e9dc, 472px 329px #f2e9dc, 1053px 874px #f2e9dc, 1214px 309px #f2e9dc, 1154px 727px #f2e9dc, 1233px 1591px #f2e9dc, 383px 1211px #f2e9dc, 245px 517px #f2e9dc, 661px 399px #f2e9dc, 243px 1162px #f2e9dc, 922px 204px #f2e9dc, 423px 78px #f2e9dc, 996px 1385px #f2e9dc, 382px 1583px #f2e9dc, 1149px 644px #f2e9dc, 484px 1084px #f2e9dc, 1524px 1477px #f2e9dc, 1108px 1470px #f2e9dc, 1335px 1494px #f2e9dc, 184px 63px #f2e9dc, 1390px 471px #f2e9dc, 1410px 816px #f2e9dc, 1497px 1127px #f2e9dc, 266px 1083px #f2e9dc, 1518px 211px #f2e9dc, 1565px 261px #f2e9dc, 621px 188px #f2e9dc, 642px 519px #f2e9dc, 1052px 815px #f2e9dc, 850px 122px #f2e9dc, 1293px 1367px #f2e9dc, 436px 263px #f2e9dc, 485px 1430px #f2e9dc, 464px 230px #f2e9dc, 1047px 878px #f2e9dc, 519px 192px #f2e9dc, 226px 108px #f2e9dc, 481px 1081px #f2e9dc, 1042px 187px #f2e9dc, 813px 837px #f2e9dc, 339px 1268px #f2e9dc, 404px 1587px #f2e9dc, 1526px 1392px #f2e9dc, 6px 293px #f2e9dc, 45px 1575px #f2e9dc, 528px 1153px #f2e9dc, 1385px 150px #f2e9dc, 401px 1392px #f2e9dc, 1272px 1267px #f2e9dc, 353px 154px #f2e9dc, 239px 654px #f2e9dc, 868px 460px #f2e9dc, 1415px 500px #f2e9dc, 1455px 1379px #f2e9dc, 1013px 1071px #f2e9dc, 375px 614px #f2e9dc, 492px 327px #f2e9dc, 424px 1490px #f2e9dc, 1546px 256px #f2e9dc, 527px 123px #f2e9dc, 59px 1254px #f2e9dc, 619px 390px #f2e9dc, 237px 1314px #f2e9dc, 493px 1428px #f2e9dc, 841px 685px #f2e9dc, 1098px 552px #f2e9dc, 392px 858px #f2e9dc, 1220px 1271px #f2e9dc, 81px 334px #f2e9dc, 1011px 1034px #f2e9dc, 48px 522px #f2e9dc, 687px 1395px #f2e9dc, 1038px 574px #f2e9dc, 567px 962px #f2e9dc, 22px 1478px #f2e9dc, 864px 909px #f2e9dc, 1028px 199px #f2e9dc, 112px 1303px #f2e9dc, 226px 1137px #f2e9dc, 442px 1026px #f2e9dc, 470px 873px #f2e9dc, 1481px 115px #f2e9dc, 176px 277px #f2e9dc, 1089px 73px #f2e9dc, 845px 608px #f2e9dc, 1244px 421px #f2e9dc, 134px 1598px #f2e9dc, 1564px 23px #f2e9dc, 1377px 180px #f2e9dc, 626px 972px #f2e9dc, 838px 615px #f2e9dc, 1140px 215px #f2e9dc, 455px 1545px #f2e9dc, 990px 866px #f2e9dc, 68px 262px #f2e9dc, 998px 380px #f2e9dc, 249px 1024px #f2e9dc, 979px 31px #f2e9dc, 108px 50px #f2e9dc, 643px 1083px #f2e9dc, 1045px 1277px #f2e9dc, 1032px 1079px #f2e9dc, 1533px 36px #f2e9dc, 1388px 1471px #f2e9dc, 42px 1318px #f2e9dc, 866px 903px #f2e9dc, 600px 172px #f2e9dc, 134px 1095px #f2e9dc, 601px 24px #f2e9dc, 810px 881px #f2e9dc, 1098px 1378px #f2e9dc, 795px 1227px #f2e9dc, 105px 639px #f2e9dc, 1177px 325px #f2e9dc, 1400px 1249px #f2e9dc, 154px 294px #f2e9dc, 1124px 54px #f2e9dc, 1283px 1532px #f2e9dc, 538px 1457px #f2e9dc, 1360px 1005px #f2e9dc, 749px 958px #f2e9dc, 698px 328px #f2e9dc, 231px 1501px #f2e9dc, 1034px 74px #f2e9dc, 957px 946px #f2e9dc, 251px 245px #f2e9dc, 1527px 437px #f2e9dc, 20px 792px #f2e9dc, 525px 1562px #f2e9dc, 1009px 768px #f2e9dc, 4px 1013px #f2e9dc, 52px 1257px #f2e9dc, 1556px 287px #f2e9dc, 1036px 1417px #f2e9dc, 942px 936px #f2e9dc, 649px 984px #f2e9dc, 909px 1255px #f2e9dc, 1395px 627px #f2e9dc, 1215px 1145px #f2e9dc, 387px 255px #f2e9dc, 1428px 616px #f2e9dc, 1525px 812px #f2e9dc, 1028px 688px #f2e9dc, 178px 1218px #f2e9dc, 1004px 1237px #f2e9dc, 198px 12px #f2e9dc, 1258px 1249px #f2e9dc, 354px 510px #f2e9dc, 1193px 55px #f2e9dc, 375px 86px #f2e9dc, 489px 1499px #f2e9dc, 506px 652px #f2e9dc, 1074px 231px #f2e9dc, 1031px 1271px #f2e9dc, 1060px 753px #f2e9dc, 163px 653px #f2e9dc, 1465px 742px #f2e9dc, 1456px 1595px #f2e9dc, 972px 316px #f2e9dc, 1022px 992px #f2e9dc, 951px 1453px #f2e9dc, 588px 1462px #f2e9dc, 77px 719px #f2e9dc, 389px 22px #f2e9dc, 806px 736px #f2e9dc, 1273px 492px #f2e9dc, 1294px 1450px #f2e9dc, 679px 300px #f2e9dc, 887px 862px #f2e9dc, 599px 1538px #f2e9dc, 1042px 824px #f2e9dc, 775px 65px #f2e9dc, 643px 311px #f2e9dc, 881px 60px #f2e9dc, 892px 545px #f2e9dc, 898px 363px #f2e9dc, 222px 439px #f2e9dc, 490px 466px #f2e9dc, 1007px 937px #f2e9dc, 126px 623px #f2e9dc, 272px 1250px #f2e9dc, 863px 328px #f2e9dc, 775px 8px #f2e9dc, 233px 567px #f2e9dc, 936px 1567px #f2e9dc, 602px 973px #f2e9dc, 828px 646px #f2e9dc, 627px 109px #f2e9dc, 969px 1041px #f2e9dc, 801px 52px #f2e9dc, 500px 133px #f2e9dc, 1013px 1581px #f2e9dc, 1468px 775px #f2e9dc, 1279px 788px #f2e9dc, 32px 414px #f2e9dc, 1485px 79px #f2e9dc, 554px 1342px #f2e9dc, 1377px 631px #f2e9dc, 1208px 1316px #f2e9dc, 999px 288px #f2e9dc, 94px 287px #f2e9dc, 1000px 775px #f2e9dc, 818px 725px #f2e9dc, 528px 1006px #f2e9dc, 1240px 1309px #f2e9dc, 136px 1402px #f2e9dc, 877px 563px #f2e9dc, 1400px 818px #f2e9dc, 560px 577px #f2e9dc, 1320px 904px #f2e9dc, 1358px 352px #f2e9dc, 1429px 664px #f2e9dc, 1197px 213px #f2e9dc, 473px 516px #f2e9dc, 1108px 588px #f2e9dc, 808px 751px #f2e9dc, 539px 1134px #f2e9dc, 1118px 1571px #f2e9dc, 117px 1561px #f2e9dc, 468px 157px #f2e9dc, 622px 1063px #f2e9dc, 614px 848px #f2e9dc, 583px 1133px #f2e9dc, 1465px 1193px #f2e9dc, 157px 522px #f2e9dc, 463px 280px #f2e9dc, 850px 86px #f2e9dc, 116px 527px #f2e9dc, 662px 451px #f2e9dc, 1070px 365px #f2e9dc, 70px 1049px #f2e9dc, 880px 1563px #f2e9dc, 1283px 621px #f2e9dc, 779px 933px #f2e9dc, 1029px 114px #f2e9dc, 1023px 579px #f2e9dc, 424px 1200px #f2e9dc, 1412px 534px #f2e9dc, 1216px 1425px #f2e9dc, 1578px 1354px #f2e9dc, 1320px 704px #f2e9dc, 666px 348px #f2e9dc, 1437px 1178px #f2e9dc, 77px 399px #f2e9dc, 1342px 1001px #f2e9dc, 1228px 9px #f2e9dc, 1025px 927px #f2e9dc, 76px 365px #f2e9dc, 72px 1160px #f2e9dc, 118px 1425px #f2e9dc, 318px 614px #f2e9dc, 70px 1005px #f2e9dc, 1095px 1385px #f2e9dc, 1475px 117px #f2e9dc, 1454px 1039px #f2e9dc, 986px 503px #f2e9dc, 86px 1296px #f2e9dc, 304px 1092px #f2e9dc, 1430px 465px #f2e9dc, 647px 1524px #f2e9dc, 1397px 201px #f2e9dc, 1243px 144px #f2e9dc, 891px 576px #f2e9dc, 264px 156px #f2e9dc, 307px 650px #f2e9dc, 890px 221px #f2e9dc, 1512px 526px #f2e9dc, 81px 706px #f2e9dc, 322px 551px #f2e9dc, 5px 1019px #f2e9dc, 1536px 1556px #f2e9dc, 369px 1261px #f2e9dc, 887px 396px #f2e9dc, 1424px 91px #f2e9dc, 125px 100px #f2e9dc, 639px 1324px #f2e9dc, 1059px 467px #f2e9dc, 577px 716px #f2e9dc, 614px 947px #f2e9dc, 760px 1189px #f2e9dc, 1114px 1139px #f2e9dc, 93px 712px #f2e9dc, 672px 676px #f2e9dc, 1365px 1126px #f2e9dc, 341px 1534px #f2e9dc, 1148px 1456px #f2e9dc, 274px 1560px #f2e9dc, 36px 750px #f2e9dc, 246px 994px #f2e9dc, 102px 979px #f2e9dc, 199px 198px #f2e9dc, 545px 713px #f2e9dc, 433px 996px #f2e9dc, 150px 226px #f2e9dc, 436px 1102px #f2e9dc, 1308px 768px #f2e9dc, 761px 1591px #f2e9dc, 1211px 115px #f2e9dc, 1528px 188px #f2e9dc, 326px 860px #f2e9dc, 904px 950px #f2e9dc, 161px 579px #f2e9dc, 1066px 1102px #f2e9dc, 551px 840px #f2e9dc, 1134px 1539px #f2e9dc, 1043px 1451px #f2e9dc, 1205px 1195px #f2e9dc, 523px 1407px #f2e9dc, 1273px 796px #f2e9dc, 533px 1287px #f2e9dc, 1501px 1459px #f2e9dc, 102px 1348px #f2e9dc, 776px 632px #f2e9dc, 225px 673px #f2e9dc, 729px 361px #f2e9dc, 815px 1565px #f2e9dc, 876px 64px #f2e9dc, 1591px 857px #f2e9dc, 1095px 26px #f2e9dc, 1249px 1299px #f2e9dc, 1249px 1483px #f2e9dc, 1440px 1065px #f2e9dc, 52px 1096px #f2e9dc, 740px 1541px #f2e9dc, 891px 999px #f2e9dc, 278px 1195px #f2e9dc, 288px 834px #f2e9dc, 416px 320px #f2e9dc, 615px 163px #f2e9dc, 57px 649px #f2e9dc, 100px 1016px #f2e9dc, 266px 476px #f2e9dc, 721px 1376px #f2e9dc, 882px 1538px #f2e9dc, 593px 597px #f2e9dc, 807px 480px #f2e9dc, 615px 934px #f2e9dc, 717px 793px #f2e9dc, 191px 442px #f2e9dc, 905px 66px #f2e9dc, 235px 376px #f2e9dc, 976px 574px #f2e9dc, 80px 1496px #f2e9dc, 72px 140px #f2e9dc, 1369px 291px #f2e9dc, 218px 1184px #f2e9dc, 936px 1188px #f2e9dc, 357px 1090px #f2e9dc, 556px 1531px #f2e9dc, 1213px 386px #f2e9dc, 412px 532px #f2e9dc, 435px 1061px #f2e9dc, 5px 407px #f2e9dc, 1593px 695px #f2e9dc, 486px 1078px #f2e9dc, 1193px 485px #f2e9dc, 1123px 1584px #f2e9dc, 1107px 126px #f2e9dc, 1054px 427px #f2e9dc, 758px 617px #f2e9dc, 1576px 811px #f2e9dc, 656px 1522px #f2e9dc, 119px 647px #f2e9dc, 1282px 1526px #f2e9dc, 150px 1016px #f2e9dc, 422px 1533px #f2e9dc, 205px 124px #f2e9dc, 935px 191px #f2e9dc, 1067px 491px #f2e9dc, 42px 558px #f2e9dc, 597px 1199px #f2e9dc, 1240px 877px #f2e9dc, 1149px 1589px #f2e9dc, 418px 1533px #f2e9dc, 666px 1049px #f2e9dc, 466px 1283px #f2e9dc, 742px 1192px #f2e9dc, 974px 1083px #f2e9dc, 1287px 427px #f2e9dc, 544px 488px #f2e9dc, 1179px 1025px #f2e9dc, 603px 1284px #f2e9dc, 1099px 25px #f2e9dc, 1080px 1584px #f2e9dc, 1145px 632px #f2e9dc, 264px 1232px #f2e9dc, 547px 1327px #f2e9dc, 381px 1233px #f2e9dc, 291px 1087px #f2e9dc, 32px 576px #f2e9dc, 461px 641px #f2e9dc, 1126px 141px #f2e9dc, 712px 746px #f2e9dc, 336px 1129px #f2e9dc, 348px 1562px #f2e9dc, 275px 1446px #f2e9dc, 1035px 1265px #f2e9dc, 502px 515px #f2e9dc, 217px 604px #f2e9dc, 1334px 1042px #f2e9dc, 363px 1043px #f2e9dc, 960px 594px #f2e9dc, 1589px 705px #f2e9dc, 1261px 1403px #f2e9dc, 943px 1107px #f2e9dc, 1043px 1357px #f2e9dc, 1447px 1464px #f2e9dc, 1373px 1076px #f2e9dc, 707px 336px #f2e9dc, 348px 1365px #f2e9dc, 221px 354px #f2e9dc, 926px 28px #f2e9dc, 1466px 1217px #f2e9dc, 1359px 941px #f2e9dc, 465px 1482px #f2e9dc, 300px 1057px #f2e9dc, 159px 1156px #f2e9dc, 1120px 426px #f2e9dc, 1126px 890px #f2e9dc, 1407px 445px #f2e9dc, 444px 566px #f2e9dc, 1189px 1020px #f2e9dc, 1075px 34px #f2e9dc, 1438px 1306px #f2e9dc, 382px 961px #f2e9dc, 313px 263px #f2e9dc, 508px 149px #f2e9dc, 266px 937px #f2e9dc, 421px 636px #f2e9dc, 1072px 1422px #f2e9dc, 512px 1447px #f2e9dc, 714px 789px #f2e9dc, 1560px 660px #f2e9dc, 1456px 849px #f2e9dc, 666px 42px #f2e9dc, 599px 755px #f2e9dc, 501px 831px #f2e9dc, 983px 1553px #f2e9dc, 506px 3px #f2e9dc, 1125px 81px #f2e9dc, 236px 1398px #f2e9dc, 1414px 1283px #f2e9dc, 1058px 1565px #f2e9dc, 13px 1176px #f2e9dc, 38px 250px #f2e9dc, 804px 367px #f2e9dc, 908px 1336px #f2e9dc, 574px 1535px #f2e9dc, 192px 25px #f2e9dc, 808px 1037px #f2e9dc, 1054px 539px #f2e9dc, 35px 903px #f2e9dc, 1319px 1347px #f2e9dc, 768px 176px #f2e9dc, 290px 119px #f2e9dc, 828px 198px #f2e9dc, 867px 823px #f2e9dc, 1266px 306px #f2e9dc, 1281px 546px #f2e9dc, 804px 645px #f2e9dc, 623px 1464px #f2e9dc, 572px 692px #f2e9dc, 765px 1324px #f2e9dc, 1323px 1192px #f2e9dc, 1307px 487px #f2e9dc, 1313px 1368px #f2e9dc, 978px 181px #f2e9dc, 20px 1335px #f2e9dc, 955px 1301px #f2e9dc, 1170px 769px #f2e9dc, 906px 1430px #f2e9dc, 560px 746px #f2e9dc, 300px 675px #f2e9dc, 870px 822px #f2e9dc, 331px 620px #f2e9dc, 731px 1489px #f2e9dc, 515px 911px #f2e9dc, 1071px 103px #f2e9dc, 1311px 1422px #f2e9dc, 792px 1475px #f2e9dc, 78px 567px #f2e9dc, 1600px 1323px #f2e9dc, 391px 1208px #f2e9dc, 710px 963px #f2e9dc, 192px 1050px #f2e9dc, 438px 819px #f2e9dc, 452px 394px #f2e9dc, 842px 198px #f2e9dc;
}

.star-layer-2 {
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: transparent;
  box-shadow: 366px 256px #f2e9dc, 1316px 216px #f2e9dc, 1249px 1238px #f2e9dc, 222px 359px #f2e9dc, 1486px 81px #f2e9dc, 1197px 513px #f2e9dc, 1206px 486px #f2e9dc, 928px 678px #f2e9dc, 521px 895px #f2e9dc, 855px 730px #f2e9dc, 230px 343px #f2e9dc, 1345px 904px #f2e9dc, 1524px 1319px #f2e9dc, 565px 1054px #f2e9dc, 232px 1435px #f2e9dc, 67px 192px #f2e9dc, 58px 1254px #f2e9dc, 650px 1596px #f2e9dc, 993px 509px #f2e9dc, 371px 1039px #f2e9dc, 672px 1308px #f2e9dc, 1440px 1299px #f2e9dc, 1256px 1347px #f2e9dc, 1114px 35px #f2e9dc, 1537px 1378px #f2e9dc, 788px 627px #f2e9dc, 27px 1169px #f2e9dc, 61px 1128px #f2e9dc, 1226px 1292px #f2e9dc, 1189px 664px #f2e9dc, 489px 1359px #f2e9dc, 1591px 1180px #f2e9dc, 395px 325px #f2e9dc, 46px 71px #f2e9dc, 1556px 513px #f2e9dc, 522px 349px #f2e9dc, 485px 240px #f2e9dc, 1325px 427px #f2e9dc, 1265px 1509px #f2e9dc, 635px 1230px #f2e9dc, 253px 855px #f2e9dc, 920px 1471px #f2e9dc, 518px 992px #f2e9dc, 245px 1443px #f2e9dc, 747px 112px #f2e9dc, 1554px 891px #f2e9dc, 1177px 1025px #f2e9dc, 1340px 1384px #f2e9dc, 978px 995px #f2e9dc, 1506px 1480px #f2e9dc, 410px 201px #f2e9dc, 221px 1570px #f2e9dc, 1308px 976px #f2e9dc, 1127px 943px #f2e9dc, 701px 676px #f2e9dc, 1213px 608px #f2e9dc, 1048px 652px #f2e9dc, 478px 924px #f2e9dc, 1010px 1545px #f2e9dc, 1027px 1309px #f2e9dc, 1204px 1044px #f2e9dc, 196px 1425px #f2e9dc, 555px 1216px #f2e9dc, 38px 1253px #f2e9dc, 273px 292px #f2e9dc, 821px 971px #f2e9dc, 496px 1186px #f2e9dc, 980px 524px #f2e9dc, 431px 793px #f2e9dc, 711px 405px #f2e9dc, 861px 56px #f2e9dc, 447px 1138px #f2e9dc, 861px 204px #f2e9dc, 402px 213px #f2e9dc, 1202px 1272px #f2e9dc, 706px 268px #f2e9dc, 1459px 555px #f2e9dc, 1021px 1194px #f2e9dc, 142px 472px #f2e9dc, 201px 564px #f2e9dc, 658px 244px #f2e9dc, 794px 597px #f2e9dc, 399px 223px #f2e9dc, 1491px 1498px #f2e9dc, 547px 1492px #f2e9dc, 735px 767px #f2e9dc, 1461px 713px #f2e9dc, 1365px 912px #f2e9dc, 1100px 374px #f2e9dc, 960px 1519px #f2e9dc, 189px 953px #f2e9dc, 376px 197px #f2e9dc, 1135px 716px #f2e9dc, 130px 1185px #f2e9dc, 591px 486px #f2e9dc, 1009px 1430px #f2e9dc, 188px 1228px #f2e9dc, 1201px 453px #f2e9dc, 794px 700px #f2e9dc, 283px 956px #f2e9dc, 783px 1544px #f2e9dc, 488px 1133px #f2e9dc, 562px 931px #f2e9dc, 123px 1446px #f2e9dc, 1030px 698px #f2e9dc, 1001px 706px #f2e9dc, 152px 1014px #f2e9dc, 20px 1228px #f2e9dc, 228px 26px #f2e9dc, 63px 131px #f2e9dc, 1044px 194px #f2e9dc, 921px 1357px #f2e9dc, 715px 644px #f2e9dc, 1191px 218px #f2e9dc, 638px 1428px #f2e9dc, 1598px 927px #f2e9dc, 1048px 1258px #f2e9dc, 650px 65px #f2e9dc, 1532px 1273px #f2e9dc, 1228px 684px #f2e9dc, 691px 1300px #f2e9dc, 772px 1427px #f2e9dc, 494px 160px #f2e9dc, 4px 234px #f2e9dc, 392px 301px #f2e9dc, 1402px 718px #f2e9dc, 664px 807px #f2e9dc, 11px 634px #f2e9dc, 1511px 494px #f2e9dc, 1153px 487px #f2e9dc, 1132px 780px #f2e9dc, 1056px 839px #f2e9dc, 247px 144px #f2e9dc, 1386px 1186px #f2e9dc, 1402px 1222px #f2e9dc, 1571px 178px #f2e9dc, 728px 89px #f2e9dc, 1470px 790px #f2e9dc, 128px 1519px #f2e9dc, 1519px 569px #f2e9dc, 1107px 850px #f2e9dc, 606px 795px #f2e9dc, 887px 836px #f2e9dc, 781px 1172px #f2e9dc, 1028px 190px #f2e9dc, 1491px 1145px #f2e9dc, 617px 223px #f2e9dc, 1540px 751px #f2e9dc, 48px 647px #f2e9dc, 597px 616px #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: 366px 256px #f2e9dc, 1316px 216px #f2e9dc, 1249px 1238px #f2e9dc, 222px 359px #f2e9dc, 1486px 81px #f2e9dc, 1197px 513px #f2e9dc, 1206px 486px #f2e9dc, 928px 678px #f2e9dc, 521px 895px #f2e9dc, 855px 730px #f2e9dc, 230px 343px #f2e9dc, 1345px 904px #f2e9dc, 1524px 1319px #f2e9dc, 565px 1054px #f2e9dc, 232px 1435px #f2e9dc, 67px 192px #f2e9dc, 58px 1254px #f2e9dc, 650px 1596px #f2e9dc, 993px 509px #f2e9dc, 371px 1039px #f2e9dc, 672px 1308px #f2e9dc, 1440px 1299px #f2e9dc, 1256px 1347px #f2e9dc, 1114px 35px #f2e9dc, 1537px 1378px #f2e9dc, 788px 627px #f2e9dc, 27px 1169px #f2e9dc, 61px 1128px #f2e9dc, 1226px 1292px #f2e9dc, 1189px 664px #f2e9dc, 489px 1359px #f2e9dc, 1591px 1180px #f2e9dc, 395px 325px #f2e9dc, 46px 71px #f2e9dc, 1556px 513px #f2e9dc, 522px 349px #f2e9dc, 485px 240px #f2e9dc, 1325px 427px #f2e9dc, 1265px 1509px #f2e9dc, 635px 1230px #f2e9dc, 253px 855px #f2e9dc, 920px 1471px #f2e9dc, 518px 992px #f2e9dc, 245px 1443px #f2e9dc, 747px 112px #f2e9dc, 1554px 891px #f2e9dc, 1177px 1025px #f2e9dc, 1340px 1384px #f2e9dc, 978px 995px #f2e9dc, 1506px 1480px #f2e9dc, 410px 201px #f2e9dc, 221px 1570px #f2e9dc, 1308px 976px #f2e9dc, 1127px 943px #f2e9dc, 701px 676px #f2e9dc, 1213px 608px #f2e9dc, 1048px 652px #f2e9dc, 478px 924px #f2e9dc, 1010px 1545px #f2e9dc, 1027px 1309px #f2e9dc, 1204px 1044px #f2e9dc, 196px 1425px #f2e9dc, 555px 1216px #f2e9dc, 38px 1253px #f2e9dc, 273px 292px #f2e9dc, 821px 971px #f2e9dc, 496px 1186px #f2e9dc, 980px 524px #f2e9dc, 431px 793px #f2e9dc, 711px 405px #f2e9dc, 861px 56px #f2e9dc, 447px 1138px #f2e9dc, 861px 204px #f2e9dc, 402px 213px #f2e9dc, 1202px 1272px #f2e9dc, 706px 268px #f2e9dc, 1459px 555px #f2e9dc, 1021px 1194px #f2e9dc, 142px 472px #f2e9dc, 201px 564px #f2e9dc, 658px 244px #f2e9dc, 794px 597px #f2e9dc, 399px 223px #f2e9dc, 1491px 1498px #f2e9dc, 547px 1492px #f2e9dc, 735px 767px #f2e9dc, 1461px 713px #f2e9dc, 1365px 912px #f2e9dc, 1100px 374px #f2e9dc, 960px 1519px #f2e9dc, 189px 953px #f2e9dc, 376px 197px #f2e9dc, 1135px 716px #f2e9dc, 130px 1185px #f2e9dc, 591px 486px #f2e9dc, 1009px 1430px #f2e9dc, 188px 1228px #f2e9dc, 1201px 453px #f2e9dc, 794px 700px #f2e9dc, 283px 956px #f2e9dc, 783px 1544px #f2e9dc, 488px 1133px #f2e9dc, 562px 931px #f2e9dc, 123px 1446px #f2e9dc, 1030px 698px #f2e9dc, 1001px 706px #f2e9dc, 152px 1014px #f2e9dc, 20px 1228px #f2e9dc, 228px 26px #f2e9dc, 63px 131px #f2e9dc, 1044px 194px #f2e9dc, 921px 1357px #f2e9dc, 715px 644px #f2e9dc, 1191px 218px #f2e9dc, 638px 1428px #f2e9dc, 1598px 927px #f2e9dc, 1048px 1258px #f2e9dc, 650px 65px #f2e9dc, 1532px 1273px #f2e9dc, 1228px 684px #f2e9dc, 691px 1300px #f2e9dc, 772px 1427px #f2e9dc, 494px 160px #f2e9dc, 4px 234px #f2e9dc, 392px 301px #f2e9dc, 1402px 718px #f2e9dc, 664px 807px #f2e9dc, 11px 634px #f2e9dc, 1511px 494px #f2e9dc, 1153px 487px #f2e9dc, 1132px 780px #f2e9dc, 1056px 839px #f2e9dc, 247px 144px #f2e9dc, 1386px 1186px #f2e9dc, 1402px 1222px #f2e9dc, 1571px 178px #f2e9dc, 728px 89px #f2e9dc, 1470px 790px #f2e9dc, 128px 1519px #f2e9dc, 1519px 569px #f2e9dc, 1107px 850px #f2e9dc, 606px 795px #f2e9dc, 887px 836px #f2e9dc, 781px 1172px #f2e9dc, 1028px 190px #f2e9dc, 1491px 1145px #f2e9dc, 617px 223px #f2e9dc, 1540px 751px #f2e9dc, 48px 647px #f2e9dc, 597px 616px #f2e9dc;
}

.star-layer-3 {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: transparent;
  box-shadow: 237px 650px #f2e9dc, 314px 1081px #f2e9dc, 346px 515px #f2e9dc, 876px 1514px #f2e9dc, 1066px 743px #f2e9dc, 1231px 562px #f2e9dc, 1541px 1267px #f2e9dc, 864px 716px #f2e9dc, 664px 1276px #f2e9dc, 1035px 536px #f2e9dc, 1228px 1044px #f2e9dc, 443px 1052px #f2e9dc, 978px 489px #f2e9dc, 421px 697px #f2e9dc, 1391px 97px #f2e9dc, 1576px 1366px #f2e9dc, 329px 652px #f2e9dc, 733px 1026px #f2e9dc, 1396px 772px #f2e9dc, 367px 787px #f2e9dc, 1113px 697px #f2e9dc, 1135px 1311px #f2e9dc, 512px 1298px #f2e9dc, 1258px 264px #f2e9dc, 1451px 421px #f2e9dc, 1170px 583px #f2e9dc, 471px 1527px #f2e9dc, 1291px 358px #f2e9dc, 460px 905px #f2e9dc, 511px 662px #f2e9dc, 151px 863px #f2e9dc, 206px 127px #f2e9dc, 199px 406px #f2e9dc, 923px 1444px #f2e9dc, 1160px 1503px #f2e9dc, 317px 130px #f2e9dc, 714px 1146px #f2e9dc, 670px 458px #f2e9dc, 494px 1441px #f2e9dc, 1px 904px #f2e9dc, 102px 589px #f2e9dc, 968px 1009px #f2e9dc, 917px 523px #f2e9dc, 59px 120px #f2e9dc, 259px 992px #f2e9dc, 1231px 113px #f2e9dc, 1599px 162px #f2e9dc, 319px 626px #f2e9dc, 599px 924px #f2e9dc, 630px 490px #f2e9dc, 570px 1359px #f2e9dc, 721px 1059px #f2e9dc, 1179px 1097px #f2e9dc, 666px 1019px #f2e9dc, 979px 1273px #f2e9dc, 1456px 1227px #f2e9dc, 1057px 976px #f2e9dc, 1210px 41px #f2e9dc, 141px 1337px #f2e9dc, 1017px 1464px #f2e9dc, 53px 83px #f2e9dc, 1373px 1567px #f2e9dc, 1541px 1281px #f2e9dc, 1532px 385px #f2e9dc, 955px 996px #f2e9dc, 576px 1338px #f2e9dc, 749px 1250px #f2e9dc, 1032px 140px #f2e9dc, 935px 1079px #f2e9dc, 1565px 207px #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: 237px 650px #f2e9dc, 314px 1081px #f2e9dc, 346px 515px #f2e9dc, 876px 1514px #f2e9dc, 1066px 743px #f2e9dc, 1231px 562px #f2e9dc, 1541px 1267px #f2e9dc, 864px 716px #f2e9dc, 664px 1276px #f2e9dc, 1035px 536px #f2e9dc, 1228px 1044px #f2e9dc, 443px 1052px #f2e9dc, 978px 489px #f2e9dc, 421px 697px #f2e9dc, 1391px 97px #f2e9dc, 1576px 1366px #f2e9dc, 329px 652px #f2e9dc, 733px 1026px #f2e9dc, 1396px 772px #f2e9dc, 367px 787px #f2e9dc, 1113px 697px #f2e9dc, 1135px 1311px #f2e9dc, 512px 1298px #f2e9dc, 1258px 264px #f2e9dc, 1451px 421px #f2e9dc, 1170px 583px #f2e9dc, 471px 1527px #f2e9dc, 1291px 358px #f2e9dc, 460px 905px #f2e9dc, 511px 662px #f2e9dc, 151px 863px #f2e9dc, 206px 127px #f2e9dc, 199px 406px #f2e9dc, 923px 1444px #f2e9dc, 1160px 1503px #f2e9dc, 317px 130px #f2e9dc, 714px 1146px #f2e9dc, 670px 458px #f2e9dc, 494px 1441px #f2e9dc, 1px 904px #f2e9dc, 102px 589px #f2e9dc, 968px 1009px #f2e9dc, 917px 523px #f2e9dc, 59px 120px #f2e9dc, 259px 992px #f2e9dc, 1231px 113px #f2e9dc, 1599px 162px #f2e9dc, 319px 626px #f2e9dc, 599px 924px #f2e9dc, 630px 490px #f2e9dc, 570px 1359px #f2e9dc, 721px 1059px #f2e9dc, 1179px 1097px #f2e9dc, 666px 1019px #f2e9dc, 979px 1273px #f2e9dc, 1456px 1227px #f2e9dc, 1057px 976px #f2e9dc, 1210px 41px #f2e9dc, 141px 1337px #f2e9dc, 1017px 1464px #f2e9dc, 53px 83px #f2e9dc, 1373px 1567px #f2e9dc, 1541px 1281px #f2e9dc, 1532px 385px #f2e9dc, 955px 996px #f2e9dc, 576px 1338px #f2e9dc, 749px 1250px #f2e9dc, 1032px 140px #f2e9dc, 935px 1079px #f2e9dc, 1565px 207px #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.

Related tools

All Color & CSS Tools →

Updated September 18, 2026