Generator box-shadow

Ustaw przesunięcie, rozmycie, rozpiętość, kolor i przezroczystość za pomocą suwaków i obserwuj podgląd w czasie rzeczywistym. Wygenerowany kod CSS aktualizuje się w trakcie przeciągania, gotowy do skopiowania prosto do arkusza stylów.

Czy moje dane trafiają gdzieś dalej?

Nie, wszystko liczy się w przeglądarce, więc nie ma czego przesyłać i nikt nie śledzi tego, co tworzysz.

Co właściwie robią przesunięcie, rozmycie i rozpiętość?

Przesunięcie poziome i pionowe odsuwają cień od pudełka: wartości dodatnie przesuwają go w prawo i w dół, ujemne w lewo i w górę. Rozmycie kontroluje, jak miękka jest krawędź cienia, od ostrej sylwetki przy zerze do rozmytej poświaty przy wyższych wartościach. Rozpiętość powiększa albo zmniejsza kształt cienia jeszcze przed zastosowaniem rozmycia, więc dodatnia rozpiętość robi cień większy od pudełka z każdej strony, a ujemna ściąga go do mniejszego rozmiaru. Kolor i przezroczystość działają razem: wybierasz dowolny kolor hex, a suwak przezroczystości decyduje, jak mocny albo blady on wygląda, co narzędzie pod spodem zamienia na standardową wartość rgba(). Przełącznik inset zmienia cień z leżącego na zewnątrz krawędzi pudełka na leżący wewnątrz, dzięki czemu zamiast efektu uniesienia można uzyskać wgłębienie albo wyrzeźbienie.

Jak działa kilka warstw cienia naraz?

Dodaj kolejne warstwy, żeby układać cienie tak, jak pozwala na to CSS, każdą oddzieloną przecinkiem w ostatecznej wartości box-shadow. Częsty zabieg to ciasny, ciemny cień o niskiej przezroczystości tuż przy pudełku połączony z szerszym, jaśniejszym i bardziej rozmytym dalej od niego, co daje wrażenie naturalnej głębi trudne do osiągnięcia jednym cieniem. Warstwy renderują się w kolejności dodawania, przy czym pierwsza warstwa rysowana jest na wierzchu, dokładnie tak jak przeglądarka maluje wartości box-shadow rozdzielone przecinkami. W jednym stosie można mieszać warstwy z inset i bez, co przydaje się na przykład przy karcie potrzebującej jednocześnie delikatnego cienia na zewnątrz i lekkiego podświetlenia od wewnątrz.

Typowe zastosowania: karty i przyciski, które potrzebują głębi, efekty neumorficzne albo wgłębione, albo po prostu dobranie odpowiedniego cienia bez zgadywania wartości w pikselach ręcznie. Pełną składnię i wsparcie przeglądarek znajdziesz w dokumentacji box-shadow na MDN, a sposób działania wartości rgba() w wygenerowanym CSS opisuje przewodnik MDN po kolorach CSS.