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