Co to jest box-shadow i jak zrobić ładny cień karty?
box-shadow to właściwość CSS, która dodaje cień wokół elementu. Wpisujesz cztery liczby (przesunięcie X, przesunięcie Y, blur i spread) plus kolor i masz cień. W praktyce same liczby trudno wymyślić w głowie, dlatego dobrze go zobaczyć na żywo i pobawić się suwakami.
Tu wybierasz gotową presetkę (np. cień Material elevation 1-5, neumorfizm, brutalizm) albo budujesz własną. Każdy element może mieć kilka cieni naraz, czyli warstw (lista po prawej), co daje głębsze efekty w stylu Apple albo Material Design.
Klikasz "Kopiuj" i wklejasz gotową regułę CSS do swojego stylu.
Jak korzystać
- Kliknij presetkę z dolnej galerii (Material 1-5, neumorfizm, glow, długi cień), żeby zacząć od gotowego efektu.
- W panelu po prawej zobaczysz listę warstw. Kliknij warstwę, żeby ją edytować. Plusem na górze dodajesz nowe.
- Suwaki: X i Y = przesunięcie cienia, blur = rozmycie, spread = rozszerzenie. Kolor + przezroczystość obok.
- Włącz inset, żeby cień był wewnętrzny (jak wgłębienie, używane w neumorfizmie).
- Kopiuj regułę CSS i wklej w plik stylów albo w `style={{}}` w React.
Do czego się przydaje
Cień to niedoceniany detal który najmocniej decyduje o premium look strony. Trzy litery zła w UI to "flat without depth":
- Karty produktu w sklepie. Material elevation 2-3 wygląda jak gotowy produkt od Google, nie wymaga grafiki.
- Modal / dialog. Mocniejszy cień (elevation 4-5) odcina modal od tła i daje "Apple feel".
- Przyciski w stylu neumorfizmu. Dwa cienie naraz, jeden jasny góra-lewa, drugi ciemny dół-prawa, daje wrażenie wytłoczonego przycisku.
- Hover state na karcie. Mały cień w stanie spoczynku, większy po najechaniu, animacja CSS `transition: box-shadow 200ms` i mamy klasyczną mikrointerakcję.
- Brutalist (mocny, ostry, bez rozmycia). Czarny cień 8/8/0/0 daje cool retro look.
- Glow / neon. Cień 0/0/24/4 w żywym kolorze z alpha = świecący przycisk akcji.
Aby wybrać kolor dla cienia, zobacz konwerter kolorów. Dla zaokrąglenia rogów karty, generator border-radius.