Generator cieni CSS (box-shadow)

Przesuwaj suwaki i od razu zobacz, jak wygląda cień pudełka, karty czy przycisku. Łącz kilka warstw, aby uzyskać bardziej realistyczne cienie, lub zacznij od jednego z przykładów, a potem skopiuj kod box-shadow do swojego CSS.

Jak działa box-shadow

Właściwość box-shadow przyjmuje do czterech wartości i kolor: przesunięcie poziome i pionowe (ujemne w lewo i w górę), rozmycie (0 = ostra krawędź), rozciągnięcie (powiększa lub, gdy ujemne, zmniejsza cień) oraz kolor, zwykle czarny z przezroczystością (rgba(0, 0, 0, 0.2)). Ze słowem kluczowym inset cień rysowany jest wewnątrz pudełka.

Można łączyć kilka cieni oddzielonych przecinkami. Najbardziej realistyczne cienie łączą krótki, ostry cień z większym i rozmytym – tak robią Material Design i większość systemów projektowych.

Sztuczki z box-shadow

Cień bez przesunięcia i rozmycia, ale z rozciągnięciem (0 0 0 4px), rysuje obrys, który nie zajmuje miejsca – idealny dla fokusu przycisków i pól. Neumorfizm wykorzystuje dwa przeciwstawne cienie, jasny i ciemny, na tle w tym samym kolorze co pudełko.

Cienie nie wpływają na układ ani rozmiar elementu, ale bardzo duże, rozmyte cienie na wielu elementach mogą spowalniać przewijanie na telefonach. Aby ocienić sylwetkę przezroczystego obrazu PNG, użyj filter: drop-shadow(), a dla tekstu text-shadow.