Projektowanie elewacji karty albo modala, która nie wygląda "tanio i ostro". Zbudowanie stylu focus ring dla dostępności (np. 2px outline glow). Stworzenie efektu neon albo glow dla głównego CTA. Replikacja tokenów elewacji Material Design albo w stylu Apple do design systemu. Sztuczna głębia "inset" dla efektu wciśniętego przycisku albo wgłębienia karty.

Jeden duży cień wygląda sztucznie. Prawdziwa elewacja to dwie lub trzy nałożone warstwy: ciasny, ciemny, blisko + szeroki, miękki, daleko. Preset "Material elevation" pokazuje schemat. Czysta czerń jest za ciężka. Używaj ~10–25% alpha czerni, albo podbarw cień kolorem dopełniającym powierzchnię, żeby dodać ciepła. Cienie renderują się poza boxem. Jeśli kontener ma overflow: hidden , cień jest obcinany. Użyj wrappera albo przenieś overflow na dziecko. Cień na przezroczystym tle. Jeśli box nie ma background , cień przebija przez sam box — zwykle zaskakuje. Wydajność: bardzo duży blur na wielu elementach potrafi obciążyć słabsze mobilki. Testuj na realnym sprzęcie przed wypuszczeniem fancy glowów. Dark mode. Subtelne ciemne cienie na ciemnym tle prawie znikają; rozważ jasny inner border albo cień z jasnym podtonem w ciemnych motywach.

Generator CSS Box Shadow

Buduj jedno- lub wielowarstwowe cienie CSS wizualnie. Dostosuj offset, blur, spread, kolor i kopiuj CSS.

Shadow layers

Preview

Sample

CSS

Do czego to służy?

CSS-owy box-shadow to koń roboczy do dodawania głębi — drop shadows na kartach, podświetlenia przycisków, focus ringi, glow, efekty neonowe, nawet udawane 3D. Składnia (x y blur spread kolor, opcjonalnie inset, kilka cieni rozdzielonych przecinkami) jest łatwa do czytania, ale upierdliwa do tweakowania na ślepo. To narzędzie daje suwaki do każdej wartości i podgląd na żywo, plus presety pasujące do typowych elewacji w design systemach.

Kiedy tego użyć

Projektowanie elewacji karty albo modala, która nie wygląda "tanio i ostro".
Zbudowanie stylu focus ring dla dostępności (np. 2px outline glow).
Stworzenie efektu neon albo glow dla głównego CTA.
Replikacja tokenów elewacji Material Design albo w stylu Apple do design systemu.
Sztuczna głębia "inset" dla efektu wciśniętego przycisku albo wgłębienia karty.

Co robi każda wartość

Offset X / Y — kierunek, w którym pada cień (Y dodatni = w dół). Dla efektu "światło z góry" używaj Y > 0 i małego albo zerowego X.
Blur — jak miękka jest krawędź. 0 = ostra; większy = łagodniejsze rozmycie.
Spread — o ile cień jest większy (albo mniejszy, jeśli ujemny) od samego boxa.
Kolor i alpha — zwykle czarny z częściowym alpha albo kolor marki. Czysty #000 wygląda zbyt ciężko; spróbuj #0003 do #0002 dla naturalnej głębi.
Inset — odwraca cień do środka, jak wgłębienie.

Częste pułapki

Jeden duży cień wygląda sztucznie. Prawdziwa elewacja to dwie lub trzy nałożone warstwy: ciasny, ciemny, blisko + szeroki, miękki, daleko. Preset "Material elevation" pokazuje schemat.
Czysta czerń jest za ciężka. Używaj ~10–25% alpha czerni, albo podbarw cień kolorem dopełniającym powierzchnię, żeby dodać ciepła.
Cienie renderują się poza boxem. Jeśli kontener ma overflow: hidden, cień jest obcinany. Użyj wrappera albo przenieś overflow na dziecko.
Cień na przezroczystym tle. Jeśli box nie ma background, cień przebija przez sam box — zwykle zaskakuje.
Wydajność: bardzo duży blur na wielu elementach potrafi obciążyć słabsze mobilki. Testuj na realnym sprzęcie przed wypuszczeniem fancy glowów.
Dark mode. Subtelne ciemne cienie na ciemnym tle prawie znikają; rozważ jasny inner border albo cień z jasnym podtonem w ciemnych motywach.