PL

Generator box-shadow CSS

Generator box-shadow tworzy cienie CSS bez ręcznego wpisywania wartości. Wybierz szablon albo ustaw suwakami przesunięcie, rozmycie, spread, kolor i krycie. Łącz kilka cieni i zamieniaj dowolny w cień wewnętrzny (inset). Podgląd zmienia się od razu, a gotowy CSS skopiujesz jednym kliknięciem. Możesz też wkleić własny CSS poniżej i dalej go edytować.

Dostosuj cień

Szablony

box-shadow:
  0 10px 25px -5px rgba(0, 0, 0, 0.25),
  0 8px 10px -6px rgba(0, 0, 0, 0.1);
Jeden cień w wierszu, rozdzielone przecinkami – np. 0 4px 12px rgba(0, 0, 0, 0.12)
Wpisane dane są zapisywane tylko w tej przeglądarce.

Wynik

Deklaracja CSS
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.25), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
Warstwy cienia (pierwsza jest na wierzchu)
NrPrzesunięcie X (px)Przesunięcie Y (px)Rozmycie (px)Rozciągnięcie – spread (px)KolorRodzaj
10 px10 px25 px-5 pxrgba(0, 0, 0, 0.25)zewnętrzny
20 px8 px10 px-6 pxrgba(0, 0, 0, 0.1)zewnętrzny
Jak daleko cień wystaje poza element (ok.)
góra 10 px · prawo 20 px · dół 30 px · lewo 20 px

Jak to obliczamy

Jak działa box-shadow

Według specyfikacji W3C (CSS Backgrounds and Borders Level 3) cień składa się z dwóch do czterech długości, opcjonalnego koloru i opcjonalnego słowa kluczowego inset:

WartośćZnaczenie
1. długośćPrzesunięcie w poziomie w prawo (ujemne: w lewo)
2. długośćPrzesunięcie w pionie w dół (ujemne: w górę)
3. długośćPromień rozmycia, nigdy ujemny; pominięty = 0
4. długośćSpread: powiększa cień, wartość ujemna go zmniejsza
Kolorjeśli go brak, używany jest kolor tekstu (currentColor)
insetrysuje cień wewnątrz elementu zamiast na zewnątrz

Kilka cieni rozdzielasz przecinkami. Pierwszy cień jest rysowany na wierzchu, kolejne pod nim. Cienie nie wpływają na układ strony ani nie tworzą pasków przewijania – ale rodzic z overflow: hidden je przytnie.

Jak daleko sięga rozmycie?

Specyfikacja wymaga rozmycia przybliżającego rozmycie Gaussa z odchyleniem standardowym równym połowie promienia rozmycia. Powstałe przejście jest mniej więcej dwa razy szersze niż wartość rozmycia i wyśrodkowane na krawędzi cienia – sięga więc na zewnątrz na mniej więcej jeden promień rozmycia.

Przykład 0 10px 25px -5px: krawędź leży 25 − 5 = 20 px poza elementem i jest przesunięta o 10 px w dół. Cień wystaje więc ok. 20 − 10 = 10 px u góry, 20 px po bokach i 20 + 10 = 30 px u dołu. Generator pokazuje te wartości w polu „Jak daleko cień wystaje” – przydatne jako padding, żeby nic nie zostało przycięte.

Typowe zastosowania

Najczęściej zadawane pytania

Czym różni się blur od spread?

Blur (3. wartość) zmiękcza krawędź, nie zmieniając podstawowej powierzchni cienia. Spread (4. wartość) powiększa lub zmniejsza samą powierzchnię cienia przed rozmyciem. Blur 0 z dodatnim spread daje twardy obrys.

Jak nałożyć kilka cieni na siebie?

Rozdziel je przecinkami, np. 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24). Pierwszy cień jest na wierzchu. W generatorze kolejne warstwy dodasz przyciskiem „+ Cień”.

Dlaczego mój cień jest ucięty?

Cienie nie wliczają się do rozmiaru elementu. Jeśli rodzic ma overflow: hidden lub overflow: auto, wszystko, co wystaje, zostaje przycięte. Daj rodzicowi tyle paddingu, ile generator pokazuje przy zasięgu cienia.

Czy box-shadow działa w każdej przeglądarce?

Tak. box-shadow, łącznie z wieloma cieniami, inset i kolorami rgba(), jest obsługiwany bez prefiksów przez wszystkie aktualne przeglądarki. Generator zapisuje przezroczyste kolory jako rgba(), co rozumieją też starsze przeglądarki.

Źródła i podstawa prawna

Stan na:

Podobne narzędzia