Generator box-shadow CSS
Twórz wartości box-shadow wizualnie. Ustaw przesunięcie poziome i pionowe w pikselach, promień rozmycia (miękka krawędź), spread (powiększenie lub zmniejszenie cienia przed rozmyciem), kolor, przezroczystość i opcjonalny inset dla cieni wewnętrznych. Pole podglądu aktualizuje się na żywo; skopiuj pełną deklarację box-shadow do CSS. Zrozum, jak każdy parametr zmienia głębię i wysokość, bez metody prób i błędów w devtools.
X (px)
Y (px)
Rozmycie (px)
Spread (px)
Kolor
Krycie (0–1)
CSS
box-shadow: 0px 8px 24px 0px rgba(20, 20, 20, 0.18);
Jak zbudować box-shadow
1. Ustaw offset X i Y — dodatnie X przesuwa cień w prawo, dodatnie Y w dół.
2. Reguluj rozmycie (miękkość) i spread (rozmiar przed rozmyciem).
3. Wybierz kolor cienia i przezroczystość.
4. Włącz inset, jeśli cień ma być wewnątrz elementu; skopiuj CSS.
Przepisy na cienie
Miękka elevacja karty
offsetY 8px, blur 24px, spread 0, czarny przy 18% przezroczystości — karta w stylu Material: box-shadow: 0 8px 24px rgba(20,20,20,0.18).
Ostry cień rzucany
blur 0, spread 0, offsetY 4px — twarda krawędź jak naklejka lekko uniesiona nad stroną.
Wciśnięty przycisk (inset)
Włącz inset z małym rozmyciem — symuluje wciśnięty albo wklęsły element wewnątrz ramki.
Kiedy warto użyć tego narzędzia
• Gdy stroisz głębię UI kart, modali i przycisków.
• Gdy uczysz się, czym rozmycie różni się od spread.
• Gdy dokumentujesz tokeny designu z dokładnymi wartościami cieni.
Kiedy lepiej wybrać coś innego
• Gdy potrzebujesz wielu nałożonych cieni — skopiuj pierwszą warstwę tutaj, potem dołącz kolejne w CSS.
• Gdy chcesz text-shadow — inna właściwość o podobnej składni.
• Gdy potrzebujesz drop-shadow na nieregularnych kształtach PNG — filter: drop-shadow() może działać lepiej.
Czytanie czterech liczb
box-shadow: 0 8px 24px 0 oznacza x=0, y=8px w dół, blur=24px, spread=0. Pominięty spread domyślnie to 0. Duże rozmycie przy zerowym offsetcie daje poświatę; duży offset z małym rozmyciem — kierunkowe światło.
Warstwowanie cieni
Oddziel wiele cieni przecinkiem: box-shadow: 0 1px 2px rgba(0,0,0,0.1), 0 4px 12px rgba(0,0,0,0.15); Pierwszy cień maluje się pod kolejnymi. Połącz ciasny ciemny cień z szerokim jasnym dla realistycznej głębi.
Dostępność i wydajność
Ciężkie cienie na dużych animowanych obszarach mogą kosztować czas malowania GPU. Preferuj subtelne cienie w UI z dużą ilością danych. Upewnij się, że elementy w fokusie pozostają widoczne — nie polegaj wyłącznie na cieniu; dodaj obramowanie albo outline dla użytkowników klawiatury.
Najczęstsze pytania
Jaka jest składnia box-shadow?
box-shadow: offset-x offset-y blur-radius spread-radius color; Opcjonalne słowo inset tworzy cień wewnętrzny.
Rozmycie vs. spread?
Rozmycie zmiękcza krawędź cienia. Spread powiększa albo kurczy kształt cienia przed rozmyciem — dodatni spread powiększa, ujemny zmniejsza.
Jakich jednostek używać?
Narzędzie zwraca piksele (px), najczęstszy wybór dla cieni UI na ekranie.
Co robi inset?
Inset rysuje cień wewnątrz ramki elementu — przydatne dla wklęsłych pól formularza albo dołków.
Czy kolor cienia może być półprzezroczysty?
Tak. Przezroczystość stosowana jest do wybranego koloru, dając rgba dla gładkich krawędzi na różnych tłach.
Czy wartości trafiają na serwer?
Nie. Podgląd i CSS są lokalne.
Czy to jest darmowe?
Tak, bez konta.