Gwiaździste niebo
Stwórz efekt gwiaździstego nieba: animowane gwiazdy, meteory, kolory. Do tła strony, prezentacji i animacji CSS/Canvas. Bezpłatnie.
-
1Wprowadź dane
Wpisz treść, wklej tekst lub załaduj plik z dysku. -
2Kliknij przycisk
Narzędzie natychmiast przetworzy Twoje dane w przeglądarce. -
3Pobierz wynik
Skopiuj gotowy tekst lub zapisz plik na urządzeniu.
return "Wynik gotowy w 0.1s";
}
.starry-sky-bg{
background-color: #070A12;
background-image:
radial-gradient(circle at 25.87% 26.56%, rgba(255,255,255,0.484) 0 0.93px, rgba(255,255,255,0) 2.16px),
radial-gradient(circle at 26.14% 30.49%, rgba(255,255,255,0.929) 0 0.64px, rgba(255,255,255,0) 1.48px),
radial-gradient(circle at 78.13% 39.06%, rgba(255,255,255,0.488) 0 2.03px, rgba(255,255,255,0) 4.71px),
radial-gradient(circle at 20.69% 80.32%, rgba(255,255,255,0.879) 0 0.99px, rgba(255,255,255,0) 2.3px),
radial-gradient(circle at 29.85% 98.55%, rgba(255,255,255,0.265) 0 1.46px, rgba(255,255,255,0) 3.39px),
radial-gradient(circle at 72.35% 22.79%, rgba(255,255,255,0.42) 0 0.6px, rgba(255,255,255,0) 1.39px),
radial-gradient(circle at 6.67% 8.46%, rgba(255,255,255,0.323) 0 0.64px, rgba(255,255,255,0) 1.48px),
radial-gradient(circle at 40.89% 74.22%, rgba(255,255,255,0.903) 0 0.6px, rgba(255,255,255,0) 1.39px),
radial-gradient(circle at 6.72% 5.72%, rgba(255,255,255,0.302) 0 0.65px, rgba(255,255,255,0) 1.51px),
radial-gradient(circle at 59.18% 48.29%, rgba(255,255,255,0.605) 0 1.57px, rgba(255,255,255,0) 3.64px),
radial-gradient(circle at 61.19% 60.34%, rgba(255,255,255,0.92) 0 1.6px, rgba(255,255,255,0) 3.71px),
radial-gradient(circle at 62.49% 49.37%, rgba(255,255,255,0.756) 0 0.95px, rgba(255,255,255,0) 2.2px),
radial-gradient(circle at 32.34% 62.52%, rgba(255,255,255,0.571) 0 2.39px, rgba(255,255,255,0) 5.54px),
radial-gradient(circle at 55.24% 53.42%, rgba(255,255,255,0.96) 0 1.02px, rgba(255,255,255,0) 2.37px),
radial-gradient(circle at 49.1% 97.31%, rgba(255,255,255,0.827) 0 0.93px, rgba(255,255,255,0) 2.16px),
radial-gradient(circle at 15.32% 76.32%, rgba(255,255,255,0.533) 0 1.69px, rgba(255,255,255,0) 3.92px),
radial-gradient(circle at 80.04% 6.65%, rgba(255,255,255,0.603) 0 1.38px, rgba(255,255,255,0) 3.2px),
radial-gradient(circle at 35.93% 29.74%, rgba(255,255,255,0.489) 0 1.54px, rgba(255,255,255,0) 3.57px),
radial-gradient(circle at 44.01% 39.03%, rgba(255,255,255,0.721) 0 1.02px, rgba(255,255,255,0) 2.37px),
radial-gradient(circle at 4.79% 64.49%, rgba(255,255,255,0.938) 0 0.95px, rgba(255,255,255,0) 2.2px),
radial-gradient(circle at 58.1% 86.55%, rgba(255,255,255,0.887) 0 0.8px, rgba(255,255,255,0) 1.86px),
radial-gradient(circle at 21.02% 1.4%, rgba(255,255,255,0.635) 0 0.93px, rgba(255,255,255,0) 2.16px),
radial-gradient(circle at 23.26% 9.59%, rgba(255,255,255,0.319) 0 0.62px, rgba(255,255,255,0) 1.44px),
radial-gradient(circle at 49.38% 49.66%, rgba(255,255,255,0.94) 0 1.19px, rgba(255,255,255,0) 2.76px),
radial-gradient(circle at 47.27% 48.87%, rgba(255,255,255,0.53) 0 0.75px, rgba(255,255,255,0) 1.74px),
radial-gradient(circle at 12.11% 12.7%, rgba(255,255,255,0.681) 0 1.08px, rgba(255,255,255,0) 2.51px),
radial-gradient(circle at 5.38% 25.11%, rgba(255,255,255,0.528) 0 1.49px, rgba(255,255,255,0) 3.46px),
radial-gradient(circle at 18.18% 81.5%, rgba(255,255,255,0.676) 0 0.95px, rgba(255,255,255,0) 2.2px),
radial-gradient(circle at 38.26% 26.06%, rgba(255,255,255,0.908) 0 0.72px, rgba(255,255,255,0) 1.67px),
radial-gradient(circle at 30.13% 15.53%, rgba(255,255,255,0.66) 0 0.67px, rgba(255,255,255,0) 1.55px),
radial-gradient(circle at 87.62% 81.19%, rgba(255,255,255,0.36) 0 0.91px, rgba(255,255,255,0) 2.11px),
radial-gradient(circle at 68.34% 11.02%, rgba(255,255,255,0.613) 0 1.76px, rgba(255,255,255,0) 4.08px),
radial-gradient(circle at 69.23% 23.76%, rgba(255,255,255,0.327) 0 1.76px, rgba(255,255,255,0) 4.08px),
radial-gradient(circle at 52.84% 56.91%, rgba(255,255,255,0.508) 0 0.83px, rgba(255,255,255,0) 1.93px),
radial-gradient(circle at 83.45% 40.43%, rgba(255,255,255,0.579) 0 0.81px, rgba(255,255,255,0) 1.88px),
radial-gradient(circle at 82.61% 78.12%, rgba(255,255,255,0.699) 0 0.74px, rgba(255,255,255,0) 1.72px),
radial-gradient(circle at 63.31% 8.39%, rgba(255,255,255,0.678) 0 1.44px, rgba(255,255,255,0) 3.34px),
radial-gradient(circle at 52.35% 66.48%, rgba(255,255,255,0.725) 0 2.21px, rgba(255,255,255,0) 5.13px),
radial-gradient(circle at 60.04% 19.92%, rgba(255,255,255,0.615) 0 0.6px, rgba(255,255,255,0) 1.39px),
radial-gradient(circle at 6.82% 99.05%, rgba(255,255,255,0.27) 0 1.55px, rgba(255,255,255,0) 3.6px),
radial-gradient(circle at 66.1% 94.57%, rgba(255,255,255,0.591) 0 0.72px, rgba(255,255,255,0) 1.67px),
radial-gradient(circle at 32.6% 43.99%, rgba(255,255,255,0.775) 0 0.8px, rgba(255,255,255,0) 1.86px),
radial-gradient(circle at 75.77% 78.73%, rgba(255,255,255,0.714) 0 1.47px, rgba(255,255,255,0) 3.41px),
radial-gradient(circle at 87.41% 53.93%, rgba(255,255,255,0.96) 0 1.29px, rgba(255,255,255,0) 2.99px),
radial-gradient(circle at 83.14% 32.72%, rgba(255,255,255,0.594) 0 1.88px, rgba(255,255,255,0) 4.36px),
radial-gradient(circle at 66.87% 46.81%, rgba(255,255,255,0.498) 0 1.47px, rgba(255,255,255,0) 3.41px),
radial-gradient(circle at 17.73% 5.43%, rgba(255,255,255,0.35) 0 1.85px, rgba(255,255,255,0) 4.29px),
radial-gradient(circle at 8.86% 74.26%, rgba(255,255,255,0.602) 0 0.94px, rgba(255,255,255,0) 2.18px),
radial-gradient(circle at 17.45% 96.44%, rgba(255,255,255,0.769) 0 0.61px, rgba(255,255,255,0) 1.42px),
radial-gradient(circle at 35.27% 77.43%, rgba(255,255,255,0.762) 0 0.85px, rgba(255,255,255,0) 1.97px),
radial-gradient(circle at 39.23% 5.59%, rgba(255,255,255,0.375) 0 0.86px, rgba(255,255,255,0) 2px),
radial-gradient(circle at 31.29% 30.39%, rgba(255,255,255,0.64) 0 2.36px, rgba(255,255,255,0) 5.48px),
radial-gradient(circle at 7% 70.12%, rgba(255,255,255,0.655) 0 0.8px, rgba(255,255,255,0) 1.86px),
radial-gradient(circle at 62.24% 70.96%, rgba(255,255,255,0.372) 0 0.75px, rgba(255,255,255,0) 1.74px),
radial-gradient(circle at 97.29% 89.27%, rgba(255,255,255,0.682) 0 0.67px, rgba(255,255,255,0) 1.55px),
radial-gradient(circle at 27.85% 19.06%, rgba(255,255,255,0.779) 0 1.94px, rgba(255,255,255,0) 4.5px),
radial-gradient(circle at 62.23% 36.37%, rgba(255,255,255,0.659) 0 0.6px, rgba(255,255,255,0) 1.39px),
radial-gradient(circle at 54.07% 82.6%, rgba(255,255,255,0.476) 0 0.72px, rgba(255,255,255,0) 1.67px),
radial-gradient(circle at 90.13% 58.5%, rgba(255,255,255,0.856) 0 0.87px, rgba(255,255,255,0) 2.02px),
radial-gradient(circle at 22.32% 50.84%, rgba(255,255,255,0.397) 0 1.58px, rgba(255,255,255,0) 3.67px),
radial-gradient(circle at 3.52% 63.55%, rgba(255,255,255,0.46) 0 0.62px, rgba(255,255,255,0) 1.44px),
radial-gradient(circle at 36.37% 75.21%, rgba(255,255,255,0.719) 0 0.92px, rgba(255,255,255,0) 2.13px),
radial-gradient(circle at 94.69% 94.84%, rgba(255,255,255,0.832) 0 1.55px, rgba(255,255,255,0) 3.6px),
radial-gradient(circle at 26.55% 37.71%, rgba(255,255,255,0.697) 0 1.74px, rgba(255,255,255,0) 4.04px),
radial-gradient(circle at 98.73% 93.25%, rgba(255,255,255,0.414) 0 0.7px, rgba(255,255,255,0) 1.62px),
radial-gradient(circle at 91.61% 6.74%, rgba(255,255,255,0.652) 0 1.24px, rgba(255,255,255,0) 2.88px),
radial-gradient(circle at 4.12% 46.81%, rgba(255,255,255,0.801) 0 0.6px, rgba(255,255,255,0) 1.39px),
radial-gradient(circle at 77.98% 80.49%, rgba(255,255,255,0.866) 0 0.61px, rgba(255,255,255,0) 1.42px),
radial-gradient(circle at 0.69% 27.81%, rgba(255,255,255,0.711) 0 0.88px, rgba(255,255,255,0) 2.04px),
radial-gradient(circle at 96.58% 17.76%, rgba(255,255,255,0.385) 0 1.34px, rgba(255,255,255,0) 3.11px),
radial-gradient(circle at 65.28% 17.43%, rgba(255,255,255,0.368) 0 0.93px, rgba(255,255,255,0) 2.16px),
radial-gradient(circle at 77.12% 56.37%, rgba(255,255,255,0.978) 0 1.94px, rgba(255,255,255,0) 4.5px),
radial-gradient(circle at 84.67% 17.82%, rgba(255,255,255,0.534) 0 0.62px, rgba(255,255,255,0) 1.44px),
radial-gradient(circle at 59.89% 18.96%, rgba(255,255,255,0.498) 0 1.91px, rgba(255,255,255,0) 4.43px),
radial-gradient(circle at 16.23% 51.73%, rgba(255,255,255,0.706) 0 2.17px, rgba(255,255,255,0) 5.03px),
radial-gradient(circle at 25.08% 6.41%, rgba(255,255,255,0.406) 0 0.6px, rgba(255,255,255,0) 1.39px),
radial-gradient(circle at 85.91% 49.61%, rgba(255,255,255,0.961) 0 1.93px, rgba(255,255,255,0) 4.48px),
radial-gradient(circle at 59.52% 78.65%, rgba(255,255,255,0.443) 0 0.79px, rgba(255,255,255,0) 1.83px),
radial-gradient(circle at 23.77% 24.22%, rgba(255,255,255,0.713) 0 1.32px, rgba(255,255,255,0) 3.06px),
radial-gradient(circle at 61.06% 23.05%, rgba(255,255,255,0.721) 0 1.1px, rgba(255,255,255,0) 2.55px),
radial-gradient(circle at 37.1% 32.73%, rgba(255,255,255,0.374) 0 0.99px, rgba(255,255,255,0) 2.3px),
radial-gradient(circle at 80.27% 10.26%, rgba(255,255,255,0.703) 0 0.8px, rgba(255,255,255,0) 1.86px),
radial-gradient(circle at 20.89% 26.38%, rgba(255,255,255,0.67) 0 0.64px, rgba(255,255,255,0) 1.48px),
radial-gradient(circle at 99.83% 37.58%, rgba(255,255,255,0.355) 0 1.14px, rgba(255,255,255,0) 2.64px),
radial-gradient(circle at 5.91% 87.51%, rgba(255,255,255,0.365) 0 0.98px, rgba(255,255,255,0) 2.27px),
radial-gradient(circle at 51.27% 59.82%, rgba(255,255,255,0.445) 0 1.5px, rgba(255,255,255,0) 3.48px),
radial-gradient(circle at 44.28% 54.22%, rgba(255,255,255,0.642) 0 0.6px, rgba(255,255,255,0) 1.39px),
radial-gradient(circle at 69.27% 7.66%, rgba(255,255,255,0.501) 0 0.62px, rgba(255,255,255,0) 1.44px),
radial-gradient(circle at 32.46% 32.49%, rgba(255,255,255,0.389) 0 0.95px, rgba(255,255,255,0) 2.2px),
radial-gradient(circle at 83.48% 93.5%, rgba(255,255,255,0.429) 0 0.67px, rgba(255,255,255,0) 1.55px),
radial-gradient(circle at 71.86% 95.73%, rgba(255,255,255,0.391) 0 0.6px, rgba(255,255,255,0) 1.39px),
radial-gradient(circle at 47.82% 4.82%, rgba(255,255,255,0.526) 0 0.77px, rgba(255,255,255,0) 1.79px),
radial-gradient(circle at 66.83% 71.96%, rgba(255,255,255,0.678) 0 1.04px, rgba(255,255,255,0) 2.41px),
radial-gradient(circle at 7.23% 85.07%, rgba(255,255,255,0.665) 0 1.9px, rgba(255,255,255,0) 4.41px),
radial-gradient(circle at 60.26% 18.37%, rgba(255,255,255,0.779) 0 1.21px, rgba(255,255,255,0) 2.81px),
radial-gradient(circle at 2.02% 1.97%, rgba(255,255,255,0.871) 0 1.63px, rgba(255,255,255,0) 3.78px),
radial-gradient(circle at 6.57% 83.46%, rgba(255,255,255,0.637) 0 1.08px, rgba(255,255,255,0) 2.51px),
radial-gradient(circle at 9.64% 3.42%, rgba(255,255,255,0.316) 0 0.91px, rgba(255,255,255,0) 2.11px),
radial-gradient(circle at 82.31% 56.62%, rgba(255,255,255,0.672) 0 0.67px, rgba(255,255,255,0) 1.55px),
radial-gradient(circle at 23.99% 60.85%, rgba(255,255,255,0.711) 0 2.09px, rgba(255,255,255,0) 4.85px),
radial-gradient(circle at 34.18% 5.27%, rgba(255,255,255,0.258) 0 1.3px, rgba(255,255,255,0) 3.02px),
radial-gradient(circle at 72.21% 0.07%, rgba(255,255,255,0.608) 0 1.41px, rgba(255,255,255,0) 3.27px),
radial-gradient(circle at 64.56% 99.44%, rgba(255,255,255,0.601) 0 1.52px, rgba(255,255,255,0) 3.53px),
radial-gradient(circle at 68.95% 19.62%, rgba(255,255,255,0.86) 0 1.01px, rgba(255,255,255,0) 2.34px),
radial-gradient(circle at 54.62% 23.91%, rgba(255,255,255,0.775) 0 1.08px, rgba(255,255,255,0) 2.51px),
radial-gradient(circle at 8.23% 96.64%, rgba(255,255,255,0.982) 0 1.87px, rgba(255,255,255,0) 4.34px),
radial-gradient(circle at 24.78% 77.79%, rgba(255,255,255,0.415) 0 1.64px, rgba(255,255,255,0) 3.8px),
radial-gradient(circle at 92.69% 80.25%, rgba(255,255,255,0.676) 0 1.68px, rgba(255,255,255,0) 3.9px),
radial-gradient(circle at 32.82% 61.64%, rgba(255,255,255,0.816) 0 1.88px, rgba(255,255,255,0) 4.36px),
radial-gradient(circle at 0.38% 72.38%, rgba(255,255,255,0.504) 0 2.17px, rgba(255,255,255,0) 5.03px),
radial-gradient(circle at 9.42% 52.1%, rgba(255,255,255,0.687) 0 0.62px, rgba(255,255,255,0) 1.44px),
radial-gradient(circle at 89.09% 96.13%, rgba(255,255,255,0.971) 0 0.62px, rgba(255,255,255,0) 1.44px),
radial-gradient(circle at 31.17% 63.97%, rgba(255,255,255,0.814) 0 1.26px, rgba(255,255,255,0) 2.92px),
radial-gradient(circle at 38.12% 51.65%, rgba(255,255,255,0.768) 0 0.64px, rgba(255,255,255,0) 1.48px),
radial-gradient(circle at 31.16% 99.83%, rgba(255,255,255,0.373) 0 0.61px, rgba(255,255,255,0) 1.42px),
radial-gradient(circle at 27.61% 59.48%, rgba(255,255,255,0.914) 0 0.65px, rgba(255,255,255,0) 1.51px),
radial-gradient(circle at 47.01% 87.14%, rgba(255,255,255,0.661) 0 1.04px, rgba(255,255,255,0) 2.41px),
radial-gradient(circle at 55.29% 91.43%, rgba(255,255,255,0.558) 0 0.7px, rgba(255,255,255,0) 1.62px),
radial-gradient(circle at 6.41% 2.89%, rgba(255,255,255,0.467) 0 1.86px, rgba(255,255,255,0) 4.32px),
radial-gradient(circle at 90.82% 88.91%, rgba(255,255,255,0.938) 0 0.83px, rgba(255,255,255,0) 1.93px),
radial-gradient(circle at 50.16% 85.65%, rgba(255,255,255,0.365) 0 0.76px, rgba(255,255,255,0) 1.76px),
radial-gradient(circle at 67.55% 68.82%, rgba(255,255,255,0.996) 0 1.95px, rgba(255,255,255,0) 4.52px),
radial-gradient(circle at 92.76% 35.22%, rgba(255,255,255,0.904) 0 1.95px, rgba(255,255,255,0) 4.52px),
radial-gradient(circle at 11.84% 16.88%, rgba(255,255,255,0.396) 0 0.67px, rgba(255,255,255,0) 1.55px),
radial-gradient(circle at 20.39% 99.72%, rgba(255,255,255,0.706) 0 0.72px, rgba(255,255,255,0) 1.67px),
radial-gradient(circle at 9.88% 68.53%, rgba(255,255,255,0.954) 0 0.6px, rgba(255,255,255,0) 1.39px),
radial-gradient(circle at 26.52% 50.22%, rgba(255,255,255,0.472) 0 0.73px, rgba(255,255,255,0) 1.69px),
radial-gradient(circle at 11.91% 77.23%, rgba(255,255,255,0.468) 0 1.56px, rgba(255,255,255,0) 3.62px),
radial-gradient(circle at 84.92% 42.83%, rgba(255,255,255,0.892) 0 0.97px, rgba(255,255,255,0) 2.25px),
radial-gradient(circle at 74.12% 70.38%, rgba(255,255,255,0.71) 0 0.83px, rgba(255,255,255,0) 1.93px),
radial-gradient(circle at 60.22% 68.31%, rgba(255,255,255,0.463) 0 0.67px, rgba(255,255,255,0) 1.55px),
radial-gradient(circle at 37.84% 92.66%, rgba(255,255,255,0.318) 0 1.83px, rgba(255,255,255,0) 4.25px),
radial-gradient(circle at 55.95% 89.19%, rgba(255,255,255,0.715) 0 0.65px, rgba(255,255,255,0) 1.51px),
radial-gradient(circle at 46.43% 36.84%, rgba(255,255,255,0.351) 0 1.22px, rgba(255,255,255,0) 2.83px),
radial-gradient(circle at 0.09% 64.38%, rgba(255,255,255,0.835) 0 0.65px, rgba(255,255,255,0) 1.51px),
radial-gradient(circle at 99.52% 62.23%, rgba(255,255,255,0.747) 0 1.29px, rgba(255,255,255,0) 2.99px),
radial-gradient(circle at 68.13% 61.26%, rgba(255,255,255,0.459) 0 0.73px, rgba(255,255,255,0) 1.69px),
radial-gradient(circle at 44.82% 0.46%, rgba(255,255,255,0.433) 0 1.87px, rgba(255,255,255,0) 4.34px),
radial-gradient(circle at 43.58% 55.33%, rgba(255,255,255,0.861) 0 1.01px, rgba(255,255,255,0) 2.34px),
radial-gradient(circle at 7.43% 48.89%, rgba(255,255,255,0.353) 0 1.88px, rgba(255,255,255,0) 4.36px);
background-repeat: no-repeat;
background-size: cover;
}
Liczba gwiazd
limit narzędzia: 10–400
Wysokość podglądu
tło skaluje się z szerokością kontenera
Rozmiar gwiazd
min–max px; losowanie kwadratem faworyzuje mniejsze
Poświata
0% daje niemal twarde punkty
Ziarno
to samo ziarno = identyczne niebo
| Etap | Co robi silnik |
|---|---|
| Ziarno losowania | md5 ziarna wyznacza stan generatora (LCG: 1103515245·x + 12345 mod 2³¹) — to samo ziarno daje dokładnie to samo niebo, bez losowości w przeglądarce |
| Pozycje gwiazd | dwa kolejne losy na gwiazdę wyznaczają x i y w zakresie 0–100% (zaokrąglone do 2 miejsc) — pozycje są względne, więc tło skaluje się razem z kontenerem |
| Rozmiar gwiazd | min + (max − min) · t², gdzie t to kolejny los; kwadrat przesuwa rozkład ku mniejszym gwiazdom, a gdy maksimum < minimum, wartości są zamieniane miejscami |
| Krycie (alpha) | 0,25–1,00 losowane osobno dla każdej gwiazdy — niektóre punkty są wyraźnie bledsze, co daje efekt głębi |
| Poświata | promień zaniku = rozmiar + max(0,6 px, poświata), gdzie poświata = (poświata% ÷ 100) · rozmiar · 6 px; 0% daje niemal twarde punkty |
| Wyjście | każda gwiazda to radial-gradient(circle at x% y%, kolor 0 r px, przezroczysty do r + poświata px); wszystkie warstwy trafiają po przecinku do background-image klasy .starry-sky-bg |
| Limity formularza | 10–400 gwiazd, rozmiary 0,3–6 px (minimum) i 0,5–12 px (maksimum), poświata 0–100%, wysokość podglądu 180–700 px |
Warto wiedzieć — gwiazdy, konstelacje i wydajność
Gwiazdy a konstelacje
Narzędzie rozmieszcza punkty losowo (z ziarnem), więc nie odwzorowuje realnego nocnego nieba — nie znajdziesz tu Wielkiej Niedźwiedzicy. Konstelacje to umowne figury, które ludzie połączyli liniami na losowo wyglądającym polu gwiazd.
Ziarno = powtarzalne tło
Ten sam seed zawsze da identyczny układ gwiazd, także na innym urządzeniu. Zapisz ziarno, które Ci się podoba, i użyj go ponownie — wygodne przy spójnych nagłówkach na wielu stronach albo przy testach A/B.
Liczba gwiazd a wydajność
Każda gwiazda to jedna warstwa radial-gradient w background-image. Kilka–kilkanaście dużych punktów czyta się lepiej niż setka drobnych, a strona pozostaje lekka — CSS nie pobiera żadnych obrazków, tło liczy się z dwóch kolorów.
Oceń to narzędzie:
Powiązane narzędzia
Inne narzędzia, które mogą Ci się przydaćGwiaździste niebo – animowany efekt nocnego nieba dla web
Gwiaździste niebo to popularny efekt wizualny dla tła stron, prezentacji i kreacji graficznych. Narzędzie generuje animowany canvas z gwiazdami, opcjonalnymi meteorami, mgławicami i Drogą Mleczną – możliwy export do JS/CSS lub jako SVG.
Techniki tworzenia gwiaździstego nieba
Canvas 2D: drawArc dla gwiazd, requestAnimationFrame dla animacji. CSS: box-shadow na jednym div (klasyczna technika). WebGL: particles dla tysięcy gwiazd z dobrą wydajnością. Three.js: BufferGeometry z PointsMaterial. SVG:
CSS gwiaździste niebo (klasyczne)
Technika: jeden div, mega box-shadow. .stars { box-shadow: 100px 200px #fff, 300px 50px #fff, ... (tysiące pozycji). Generuj: JavaScript → CSS string. Animacja: @keyframes moveStars { from { transform: translateY(0); } to { transform: translateY(-2000px); } }. Wady: duży CSS, jeden rozmiar gwiazd.
Canvas JavaScript – podstawy
const canvas = document.getElementById("sky"); const ctx = canvas.getContext("2d"). Tło: ctx.fillStyle = "#0a0a1a"; ctx.fillRect(0,0,W,H). Gwiazda: ctx.beginPath(); ctx.arc(x,y,r,0,2*Math.PI); ctx.fillStyle = "rgba(255,255,255,alpha)"; ctx.fill(). Twinkle: alpha = 0.5 + 0.5 * Math.sin(Date.now()*freq + phase).
Efekty dodatkowe: meteory i mgławice
Meteory: linia z gradient (jasny koniec → przeźroczysty). Ruch: requestAnimationFrame, resetuj gdy poza ekranem. Mgławica: radialGradient z opakowaniem blur(). Droga Mleczna: elipsa z dużą ilością małych gwiazd i gradient fog. Aurora: falujące sinusoidy z gradient fill. Parallax: różne warstwy gwiazd poruszają się z różną prędkością.
Jak działa generator animowanego nieba
Cały efekt opiera się na pętli animacji i elemencie canvas. W każdej klatce kontekst 2D najpierw wypełnia cały obszar kolorem tła (ctx.fillStyle = "#0a0a1a"; ctx.fillRect(0, 0, W, H)), a dopiero potem na tym tle rysowane są kolejne elementy: mgławice, Droga Mleczna, gwiazdy i meteory. Pojedyncza gwiazda to łuk: ctx.beginPath(), ctx.arc(x, y, r, 0, 2 * Math.PI), ustawienie koloru w formie rgba(255, 255, 255, alpha) i wywołanie ctx.fill(). Następną klatkę zgłasza requestAnimationFrame, dzięki czemu rysowanie jest zsynchronizowane z odświeżaniem ekranu, a przeglądarka może wstrzymać pracę, gdy karta jest nieaktywna.
Migotanie nie wymaga przygotowanej listy klatek. Jasność gwiazdy wynika wprost z funkcji sinus: alpha = 0,5 + 0,5 * sin(t * freq + phase). Sinus przyjmuje wartości od -1 do 1, więc alpha mieści się w przedziale od 0 do 1 — przy wartości -1 gwiazda na moment gaśnie całkowicie. Każda gwiazda ma własną fazę, dlatego pulsy rozkładają się w czasie i niebo nie mruga równym, mechanicznym rytmem. Zmiana parametru freq przyspiesza lub spowalnia ten cykl dla wszystkich gwiazd naraz.
Kolejne elementy różnią się sposobem rysowania. Warstwy gwiazd przesuwają się z różnymi prędkościami, co daje wrażenie paralaksy bez zmiany rozmiaru punktów. Meteor to linia wypełniona gradientem, w którym jasny koniec przechodzi w pełną przezroczystość, a obiekt jest resetowany po opuszczeniu obszaru rysowania. Mgławica i Droga Mleczna leżą pod gwiazdami i korzystają z gradientów radialnych oraz rozmycia, dzięki czemu nie konkurują z punktami o uwagę. Aurora to falujące sinusoidy wypełnione gradientem.
Przykład krok po kroku: animowane tło sekcji na stronie firmowej
- Przygotuj kontener canvas o rozmiarach sekcji i pobierz kontekst 2D. Ustaw tło jednym wywołaniem ctx.fillStyle = "#0a0a1a" oraz ctx.fillRect(0, 0, W, H) — ten sam kolor musi być odtwarzany na początku każdej klatki, inaczej gwiazdy zostawią smugi.
- Wygeneruj gwiazdy: dla każdej wylosuj pozycję x i y, promień r oraz fazę. Rysowanie wykonaj przez ctx.beginPath(), ctx.arc(x, y, r, 0, 2 * Math.PI) i ctx.fill() z kolorem rgba(255, 255, 255, alpha).
- Dodaj migotanie wzorem alpha = 0,5 + 0,5 * sin(t * freq + phase). Przy freq = 0,001 na milisekundę i fazie 0 w chwili startu sinus wynosi 0, więc alpha = 0,5. Po około 785 milisekundach argument osiąga 0,785 rad, sinus jest równy w przybliżeniu 0,707, a alpha rośnie do około 0,85.
- Rozdziel gwiazdy na dwie lub trzy warstwy i nadaj im różne prędkości przesuwu. Najdalsza warstwa porusza się najwolniej, najbliższa najszybciej — bez tej różnicy efekt głębi nie powstanie.
- Dodaj jeden meteor jako linię z gradientem: jasny koniec na początku smugi, pełna przezroczystość na końcu. Po wyjściu poza obszar rysowania zresetuj jego pozycję, żeby pojawiał się cyklicznie.
- Wybierz format wyjścia. Dla ruchomego tła pobierz gotowy kod JS lub CSS, a dla statycznej wersji do druku albo do prezentacji — plik SVG z samymi gwiazdami.
Parametry efektu i ich wpływ na wynik
| Parametr | Co zmienia | Na co uważać |
|---|---|---|
| Liczba gwiazd | Gęstość nieba i obciążenie każdej klatki | W canvas 2D koszt rośnie wraz z liczbą punktów; przy tysiącach gwiazd lepsze są particles w WebGL |
| Promień gwiazdy (r) | Grubość punktu i wrażenie głębi | Klasyczny CSS z box-shadow daje jeden rozmiar gwiazd na całym niebie |
| Częstotliwość migotania (freq) | Tempo zmian jasności w funkcji sinus | Zbyt wysoka wartość zamienia spokojne migotanie w nerwowe drganie |
| Faza (phase) | Przesunięcie migotania w czasie | Bez różnych faz wszystkie gwiazdy pulsują jednocześnie |
| Prędkość warstwy | Tempo przesuwu i siła paralaksy | Warstwy muszą różnić się prędkością, inaczej efekt znika |
| Kolor tła | Kontrast gwiazd i czytelność tekstu na niebie | #0a0a1a to granatowa czerń, nie czysta czerń — daje większą głębię |
| Gradient meteoru | Długość i miękkość smugi | Jasny koniec musi przechodzić w przezroczystość, inaczej widać ostrą linię |
| Zakres ruchu w CSS | Odległość przesuwu animacji tła | Klasyczna animacja korzysta z translateY(-2000px) i zapętla się w nieskończoność |
Praktyczne wskazówki przy ustawianiu nieba
- Dobierz liczbę gwiazd do urządzenia — na telefonie mniejsza gęstość punktów wygląda równie dobrze, a pętla animacji ma mniej pracy w każdej klatce.
- Różnicuj fazę, nie częstotliwość — jednolity parametr freq dla całego nieba plus indywidualne fazy dają naturalny, nieskoordynowany efekt migotania.
- Ustaw tło i gwiazdy kontrastowo, ale nie skrajnie — granatowe tło w stylu #0a0a1a lepiej łączy się z jasnym tekstem i innymi elementami interfejsu niż czysta czerń.
- Buduj głębię z warstw — dwie lub trzy warstwy o różnych prędkościach przesuwu wystarczą, żeby niebo przestało być płaską tapetą.
- Traktuj meteory i mgławice jako akcent — pojedynczy meteor i delikatna mgławica przyciągają wzrok; kilka smug naraz rozprasza odbiór treści strony.
Ograniczenia i czynniki zaburzające efekt
- Wydajność na słabszych urządzeniach — canvas rysuje od nowa każdą klatkę, więc duża liczba gwiazd i rozmyte mgławice mogą obniżyć płynność animacji.
- Ustawienie ograniczenia ruchu w systemie — część użytkowników wyłącza animacje, a wtedy migotanie i przesuw tła przestają być widoczne lub stają się niepożądane.
- Eksport do czystego CSS — klasyczna technika z box-shadow generuje długi zapis i wymusza jeden rozmiar gwiazd na całym niebie.
- Brak zgodności z rzeczywistym niebem — rozmieszczenie gwiazd jest proceduralne, więc nie odwzorowuje prawdziwych konstelacji, pory roku ani szerokości geograficznej.
Najczęstsze pytania
Jak dodać gwiaździste tło do strony web?
Opcja 1: biblioteka particles.js lub tsParticles. Opcja 2: czysty Canvas (jak na tej stronie). Opcja 3: CSS-only (box-shadow technique). Opcja 4: Lottie animation (plik JSON). Wydajność: canvas jest lepszy niż setki DOM elementów. Z-index: canvas za treścią, pointer-events: none.
Jak optymalizować animację gwiazd dla mobile?
requestAnimationFrame: zawsze zamiast setInterval/setTimeout. OffscreenCanvas: rendering w WebWorker (Chrome). Ograniczenie FPS: if (Date.now() - lastFrame < 16) return; (max 60fps). Mniej gwiazd na mobile: window.innerWidth < 768 → 100 gwiazd zamiast 400. WebGL: wydajniejszy dla dużych ilości. reduce-motion: @media (prefers-reduced-motion) { animacja wyłączona }.
Jakie biblioteki do animacji gwiazd?
particles.js (npm/CDN): popularna, konfigurowalna. tsParticles: następca particles.js, TypeScript. Three.js: jeśli potrzebujesz 3D parallax. PIXI.js: WebGL 2D renderer, doskonała wydajność. Anime.js: ogólne animacje JS. Lottie: odtwarzaj plik After Effects (.json). Dla prostych star fields: własny canvas (50-100 linii kodu).
Czy gwiazdy animowane wpływają na SEO?
Nie bezpośrednio. Ale: animacje mogą zwiększyć czas ładowania (JS bundle). Core Web Vitals: animacje z requestAnimationFrame nie powinny wpływać na LCP. CLS: jeśli canvas zepcha treść przy ładowaniu = zły CLS. INP: heavy animations = blokują main thread = słaby INP. Rozwiązanie: Canvas animacje nie blokują main thread (GPU), ale JS loop może.
Jak generować losowe gwiazdy ze stałym senem?
Seedowany PRNG: seedrandom (npm). var rng = new Math.seedrandom("mystar"). Użyj rng() zamiast Math.random(). Ten sam seed → te same gwiazdy. Przydatne: gdy chcesz ten sam "sky" dla każdego użytkownika. Lub użyj: hash URL jako seed dla unique-per-page niebo.
Czy animowane gwiaździste niebo obciąża baterię na telefonie?
Tak, jeśli pętla animacji działa bez przerwy i rysuje dużo punktów w każdej klatce. Warto ograniczyć liczbę gwiazd na małych ekranach i wstrzymywać animację, gdy sekcja z niebem jest poza widokiem.
Czy da się wyłączyć migotanie dla osób wrażliwych na ruch?
Tak, animację należy uzależnić od systemowego ustawienia ograniczającego ruch. Wtedy sensowna jest statyczna wersja nieba albo bardzo subtelne zmiany jasności.
Dlaczego niektóre gwiazdy znikają na chwilę?
Jasność liczona jako 0,5 + 0,5 * sin(t * freq + phase) osiąga zero, gdy sinus wynosi -1. Jeśli to przeszkadza, można podnieść dolną granicę zakresu jasności.
Jak uzyskać wrażenie głębi bez tysięcy gwiazd?
Wystarczy kilka warstw różniących się prędkością przesuwu oraz delikatne mgławice z gradientem. Głębię odbiera się z różnicy tempa ruchu, a nie z samej gęstości punktów.
Czy wyeksportowany plik SVG będzie animowany?
SVG sprawdza się głównie dla statycznych gwiazd — migotanie i meteor wymagają albo canvas, albo dodatkowych reguł animacji. Do ruchomego tła lepiej pobrać kod JS lub CSS.
Powiązane narzedzia: generator animacji CSS, generator tla strony i efekty cząstek.