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.

Bezpieczne (SSL)

Przetwarzanie Lokalne

100% Darmowe

Przejdź do narzędzia

Instrukcja

1

Wprowadź dane
Wpisz treść, wklej tekst lub załaduj plik z dysku.
2

Kliknij przycisk
Narzędzie natychmiast przetworzy Twoje dane w przeglądarce.
3

Pobierz wynik
Skopiuj gotowy tekst lub zapisz plik na urządzeniu.

                                                function runTool() {

                                                  return "Wynik gotowy w 0.1s";

                                                }

Ustawienia

Kolor tła

Kolor promieni

Położenie X źródła (%) 20

Położenie Y źródła (%) 15

Kąt obrotu (°) 35

Rozpiętość promieni 28

Intensywność 0.55

Rozmycie / miękkość 0.35

Ziarno losowości (seed)

Wysokość podglądu (px) 320

Zaokrąglenie rogów (px) 18

Wynik

.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;
}

inline css: 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); border-radius: 18px; preview style: 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); height: 320px; border-radius: 18px; position: relative; overflow: hidden; ray color: #FFE6A7

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.