Generator efektu promieni Boga
Generuj efekt promieni słonecznych (god rays / crepuscular rays) dla stron i gier. CSS, Canvas i WebGL. Pobierz kod. 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";
}
Źródło promieni (po jitterze)
pozycja z formularza ±6% (ziarno)
Kąty warstw (od)
druga warstwa obrócona o ±8°
Rozpiętość warstw
druga warstwa ±5° (limit 6–80°)
Intensywność
alfa twardej warstwy (max 85%)
Poświata
60% intensywności + 10% miękkości
Miękkość
koniec miękkiej strefy; twarda kończy się 20° wcześniej
.god-rays-bg{
background-color: #0B1220;
background-image:
repeating-conic-gradient(from 35deg at 17% 12%,
rgba(255,255,255, 0.55) 0deg,
rgba(255,255,255, 0) 47deg,
rgba(255,255,255, 0.55) 28deg),
repeating-conic-gradient(from 28deg at 17% 12%,
rgba(255,255,255, 0.33) 0deg,
rgba(255,255,255, 0) 67deg,
rgba(255,255,255, 0.33) 29deg),
radial-gradient(circle at 17% 12%, rgba(255,255,255, 0.2825) 0%, rgba(255,255,255, 0) 62%),
radial-gradient(circle at 50% 55%, rgba(0,0,0, 0.18) 0%, rgba(0,0,0, 0) 55%);
background-blend-mode: soft-light, soft-light, screen, multiply;
filter: saturate(1.05);
}
.god-rays-bg::before{
content:'';
position:absolute;
inset:0;
background: #FFE6A7;
opacity: 0.18;
mix-blend-mode: color;
pointer-events:none;
}
.god-rays-bg{
position:relative;
border-radius: 18px;
overflow:hidden;
}
| Warstwa | Składnia CSS (symbole z kropką = wartości z formularza) | Rola |
|---|---|---|
| 1. Promienie twarde | repeating-conic-gradient(from {kąt}deg at {źródło}, rgba(255,255,255, α) 0deg, rgba(255,255,255, 0) {twarde}deg, rgba(255,255,255, α) {rozpiętość}deg) |
główny wachlarz promieni; α = intensywność (limit 5–85%) |
| 2. Promienie miękkie | repeating-conic-gradient(from {kąt±8}deg at {źródło}, rgba(255,255,255, 0,6·α) 0deg, rgba(255,255,255, 0) {miękkie}deg, rgba(255,255,255, 0,6·α) {rozpiętość±5}deg) |
rozmyte podbicie promieni; α·0,6 (limit 3–70%) |
| 3. Poświata | radial-gradient(circle at {źródło}, rgba(255,255,255, {bloom}) 0%, rgba(255,255,255, 0) 62%) |
jasny punkt bijący ze źródła |
| 4. Winieta | radial-gradient(circle at 50% 55%, rgba(0,0,0, 0.18) 0%, rgba(0,0,0, 0) 55%) |
przyciemnione krawędzie, głębia |
| Mieszanie | background-blend-mode: soft-light, soft-light, screen, multiply; filter: saturate(1.05); |
kolejność trybów = kolejność warstw |
| Barwa promieni | .god-rays-bg::before { background: {kolor promieni}; opacity: 0.18; mix-blend-mode: color; } |
farbuje białe promienie wybranym kolorem |
Strefy wygaszania: miękka warstwa kończy się na 55 + 35·miękkość stopni (55–86°), twarda 20° wcześniej (min. 18°). Jitter pozycji ±6%, obrót drugiej warstwy ±8° i rozpiętość ±5° wylicza LCG z ziarna — ten sam seed daje identyczny układ promieni.
| Parametr | Zakres / format | Wpływ na wynik |
|---|---|---|
| Kolor tła / promieni | #RRGGBB (6 cyfr szesnastkowych) | tło bloku oraz barwa ::before farbująca promienie |
| Położenie X / Y źródła | −50% do 150% | punkt zbiegu promieni — może leżeć poza kadrem |
| Kąt obrotu | −180° do 180° | kierunek „from” obu warstw conic |
| Rozpiętość promieni | 6° do 80° | okres powtarzania repeating-conic-gradient |
| Intensywność | 0,05–0,95 | alfa promieni i baza poświaty |
| Rozmycie / miękkość | 0–0,9 | szerokość miękkiej strefy wygaszania |
| Ziarno (seed) | 0–999999 | deterministyczny LCG: jitter, kąt i rozpiętość drugiej warstwy |
| Wysokość podglądu | 160–900 px | wysokość bloku w kodzie inline |
| Zaokrąglenie rogów | 0–48 px | border-radius + overflow:hidden tła |
Wynik to gotowa klasa .god-rays-bg z pseudo-elementem ::before — wklej CSS do arkusza i nadaj klasę sekcji z position:relative (silnik dopisuje ją w snippecie).
Promienie a uwaga użytkownika
Promienie prowadzą wzrok
Wachlarz światła naturalnie przyciąga oko do punktu zbiegu — ustaw źródło nad logo lub nagłówkiem hero, a przycisk CTA umieść w przeciwległym rogu, żeby promień „dojrzał” ruch, który ma wykonać użytkownik. Unikaj promieni nad długimi blokami tekstu.
Zastosowania
Najlepiej działają na: hero landingów i stron premierych, portretach i kartach produktowych (źródło za głową/postem daje efekt „premium”), sekcjach opakowań i pudełkach z ofertą specjalną. W ciemnych motywach podbij intensywność, w jasnych trzymaj ją poniżej połowy zakresu.
Wydajność
Cztery warstwy gradientów to jednorazowy rysunek tła — tanie dla CPU/GPU. Realny koszt zaczyna się przy blend-mode i ::before (przeglądarka komponuje warstwy co klatkę, gdy nad tłem coś animujesz). Na słabszych urządzeniach testuj z filtrem saturate i pełnoekranowym tłem.
Ziarno i warianty
Pozycja źródła drga o ±6%, a druga warstwa dostaje własny kąt (±8°) i rozpiętość (±5°) — dzięki temu promienie nie wyglądają jak idealny szablon. To samo ziarno odtworzy dokładnie ten sam układ, więc efekt da się spójnie powtórzyć na kilku podstronach.
Wskazówka: kafelki nad wynikiem pokazują źródło po jitterze, kąty i rozpiętości obu warstw, intensywność, poświatę i miękką strefę — wszystkie wyliczone tym samym algorytmem, którym powstaje CSS.
Oceń to narzędzie:
Powiązane narzędzia
Inne narzędzia, które mogą Ci się przydaćGenerator efektu promieni boga — stwórz spektakularne iluminacje świetlne
Efekt promieni boga, znany w grafice komputerowej jako god rays lub światło wolumetryczne, to jeden z najbardziej malowniczych i pożądanych efektów wizualnych w nowoczesnym projektowaniu stron internetowych. Nasz generator efektu promieni boga pozwala na błyskawiczne projektowanie, dostosowywanie i wdrażanie tych dynamicznych iluminacji świetlnych bezpośrednio do kodu CSS i SVG.
Czym jest efekt promieni boga i jak działa nasz generator?
Efekt ten naśladuje naturalne zjawisko atmosferyczne, w którym promienie słoneczne przechodzą przez szczeliny w chmurach lub koronach drzew, tworząc wyraźne, świetliste smugi w powietrzu pełnym wilgoci lub pyłu. W świecie cyfrowym efekt ten dodaje trójwymiarowości, realizmu oraz dramatyzmu statycznym kompozycjom. Nasz internetowy generator pozwala na pełną kontrolę nad tym zjawiskiem. Możesz swobodnie regulować liczbę promieni, ich długość, intensywność, kąt padania, a także stopień rozproszenia krawędzi. Narzędzie wykorzystuje zaawansowane filtry SVG oraz gradienty CSS, dzięki czemu wygenerowana grafika jest w pełni wektorowa i skalowalna. Oznacza to, że wygląda ona nienagannie na każdym ekranie, od małych wyświetlaczy smartfonów po wielkie monitory o wysokiej rozdzielczości, zachowując przy tym minimalny rozmiar pliku.
Zastosowanie promieni świetlnych w projektowaniu UI/UX oraz grafice
Zastosowanie tego efektu w projektowaniu interfejsów użytkownika (UI/UX) jest bardzo szerokie. Doskonale sprawdza się jako tło dla sekcji hero, gdzie chcemy przyciągnąć wzrok użytkownika i wywrzeć na nim piorunujące pierwsze wrażenie. Efekt promieni boga jest również często stosowany w projektowaniu banerów marketingowych, stron lądowania (landing pages) promujących produkty premium, a także w grach przeglądarkowych i aplikacjach rozrywkowych. Dzięki regulacji kolorów, możesz stworzyć nie tylko klasyczne, złote światło słoneczne, ale również chłodne, księżycowe poświaty, cyberpunkowe neony czy tajemnicze, zielonkawe refleksy przypominające głębiny oceanu. Kluczem do sukcesu jest umiar – subtelne wkomponowanie promieni w tło potrafi podnieść estetykę całej witryny o kilka poziomów.
Jak zoptymalizować wygenerowany kod pod kątem wydajności strony?
Wdrożenie efektu promieni świetlnych przy użyciu naszego generatora jest wyjątkowo przyjazne dla wydajności witryny (web performance). Tradycyjne metody opierały się na ciężkich plikach rastrowych w formacie PNG lub GIF, które znacznie opóźniały ładowanie strony i negatywnie wpływały na wskaźniki Core Web Vitals. Nasze narzędzie generuje czysty kod CSS oraz filtry SVG (feGaussianBlur, feTurbulence), które są interpretowane bezpośrednio przez procesor graficzny urządzenia użytkownika. Aby uzyskać maksymalną wydajność, zaleca się stosowanie wygenerowanego kodu jako tła pozycjonowanego absolutnie z niskim indeksem z-index. Warto również ograniczyć stosowanie bardzo skomplikowanych animacji na urządzeniach mobilnych, aby oszczędzać baterię i zapobiegać drobnym przycięciom animacji na starszych modelach telefonów.
Najczęściej zadawane pytania
Jak wdrożyć efekt promieni boga na stronie internetowej?
Wdrożenie jest bardzo proste. Po spersonalizowaniu parametrów w generatorze, skopiuj wygenerowany kod CSS oraz SVG. Kod SVG wklejasz bezpośrednio do struktury HTML swojej strony, natomiast style CSS dodajesz do swojego arkusza stylów, przypisując je do elementu, który ma stanowić tło sekcji.
Czy wygenerowane promienie świetlne są responsywne?
Tak, wygenerowane efekty opierają się na technologii SVG oraz procentowym pozycjonowaniu CSS, co sprawia, że automatycznie dopasowują się do szerokości i wysokości kontenera nadrzędnego. Niezależnie od rozdzielczości ekranu, promienie będą rozchodzić się proporcjonalnie i estetycznie.
Czym różni się efekt SVG od czystego gradientu CSS?
Czysty gradient CSS tworzy jedynie przejścia kolorów między punktami, podczas gdy filtr SVG pozwala na zastosowanie zaawansowanych efektów rozmycia gaussowskiego, szumu oraz zniekształceń. Dzięki temu promienie SVG wyglądają o wiele bardziej naturalnie i posiadają charakterystyczne, miękkie krawędzie przypominające prawdziwe światło.
Czy używanie efektu promieni boga spowalnia działanie witryny?
Nie, jeśli korzystasz z wygenerowanego przez nas kodu SVG i CSS. Jest on wielokrotnie lżejszy niż tradycyjne pliki graficzne w formatach PNG czy WebP. Nowoczesne przeglądarki doskonale radzą sobie z renderowaniem filtrów wektorowych, co gwarantuje płynne działanie strony.
W jakich formatach mogę pobrać gotowy projekt promieni świetlnych?
Generator umożliwia bezpośrednie skopiowanie kodu HTML/SVG oraz CSS do schowka, co jest najwygodniejszym rozwiązaniem dla programistów. Dodatkowo istnieje możliwość pobrania gotowego pliku w formacie SVG, który możesz zaimportować do programów graficznych takich jak Figma czy Adobe Illustrator.