Polski
Projektuj wielowarstwowy CSS box-shadow z podglądem na żywo i kopiuj gotowy CSS.
Ostatnia aktualizacja
Coddy uczy cię przez pisanie prawdziwego kodu w przeglądarce: interaktywne lekcje, natychmiastowa informacja zwrotna i pomoc AI, gdy utkniesz.
box-shadow to właściwość CSS, która dodaje do dowolnego elementu cienie, poświaty i wklęsłe zagłębienia. To najmocniejsza dźwignia, by nadać płaskiemu projektowi poczucie *wysokości*: karty odrywają się od strony, okna modalne unoszą się nad treścią, a przyciski wyglądają na możliwe do wciśnięcia.
Sztuka polega na tym, że *dobry* cień rzadko ma jedną warstwę. Prawdziwe cienie są miększe i mają rozproszone odbicie światła, dlatego większość systemów projektowych (Material, iOS, Tailwind) układa 2 lub 3 deklaracje box-shadow z różnymi przesunięciami i kryciem. Pisanie ich ręcznie jest żmudne, a generator pozwala dopracować każdą warstwę wizualnie i od razu zobaczyć połączony efekt.
Generator Coddy obsługuje dowolną liczbę warstw, cienie *zewnętrzne* i *wewnętrzne* (inset), kolor i krycie dla każdej warstwy oraz gotowe ustawienia dla najczęstszych wzorców: subtelne karty, ostre cienie, poświaty w kolorze marki, wklęsłe pola i powierzchnie neumorficzne. Skopiuj CSS i wklej go prosto do arkusza stylów, bez wysyłania plików, bez konta i bez znaku wodnego.
box-shadow: [inset] <x> <y> <blur> <spread> <color>. inset umieszcza cień *wewnątrz* elementu, a bez niego cień pada na zewnątrz.rgba() (lub hsla()) dla koloru, żeby ustawiać krycie każdej warstwy. Czysta czerń przy niskim kryciu wygląda jak miękki szary cień, a przy pełnym kryciu jak twarde wycięcie.box-shadow jest składany przez GPU i to jedno z najtańszych ulepszeń wizualnych, jakie można zastosować. Nie wpływa na układ: element zachowuje swój rozmiar i pozycję.Wybierz ustawienie, które pasuje do efektu, jakiego szukasz: subtelna karta, miękkie uniesienie, ostry cień, poświata marki, wklęsłe pole lub neumorfizm. To dobre punkty startowe do dalszego dopracowania.
Przesuwaj suwaki przesunięcia X/Y, rozmycia, rozciągnięcia, koloru i krycia. Podgląd po lewej aktualizuje się na żywo. Mniejsze krycie i większe rozmycie dają *miększe* cienie.
Kliknij *Dodaj warstwę*, aby nałożyć drugi cień. Realistyczna głębia prawie zawsze wymaga dwóch warstw: krótkiej i zwartej (cień kontaktowy) oraz długiej i miękkiej (cień otoczenia).
Włączenie opcji *Inset* maluje cień wewnątrz elementu zamiast wokół niego. Połącz to z subtelnym cieniem zewnętrznym, aby uzyskać efekt wciśniętego przycisku.
Gdy podgląd odpowiada projektowi, kliknij *Kopiuj CSS*. Wklej wynik do arkusza stylów: wygenerowana reguła zawiera każdą aktywną warstwę.
Każda wartość w box-shadow: x y blur spread color i jej rola.
| Wartość | Efekt | Typowy zakres |
|---|---|---|
| Przesunięcie X | Przesuwa cień w poziomie, dodatnie = w prawo | od −40px do 40px |
| Przesunięcie Y | Przesuwa cień w pionie, dodatnie = w dół | od 0px do 40px dla naturalnego światła |
| Rozmycie (blur) | Zmiękcza krawędź cienia | od 0px do 80px |
| Rozciągnięcie (spread) | Powiększa lub zmniejsza cień przed rozmyciem | od −30px do 30px |
| Kolor | Dowolny kolor CSS, ale rgba() pozwala ustawić krycie każdej warstwy | rgba(0,0,0,0.05–0.3) dla naturalnych cieni |
inset | Maluje cień wewnątrz elementu | - |
| Wiele warstw | Oddzielone przecinkami, układane od tyłu do przodu | 2 lub 3 warstwy dają realistyczną głębię |
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.08);Zwarty cień o małym rozmyciu wyznacza punkt styku, a dłuższy, miększy cień daje wrażenie światła otoczenia. To wzorzec, którego używa większość nowoczesnych systemów projektowych.
box-shadow: 0 0 24px 4px rgba(108, 140, 255, 0.45);Ustaw X i Y na zero, żeby poświata rozchodziła się równomiernie. Małe dodatnie rozciągnięcie pogrubia poświatę, zanim rozmycie ją zmiękczy. Używaj oszczędnie, bo kolorowe poświaty mocno przyciągają uwagę.
box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.18), inset 0 0 0 1px rgba(0, 0, 0, 0.06);Cienie inset są malowane wewnątrz elementu. Jeden miękki cień daje wrażenie wklęsłego pola, a cienki inset dodaje subtelną wewnętrzną ramkę dla wyrazistości.
filter: drop-shadow() i box-shadow zamiennie. drop-shadow() podąża za maską alfa SVG lub obrazu, co przydaje się przy nieregularnych kształtach, ale box-shadow jest szybszy i czystszy dla prostokątnych elementów.box-shadow ignoruje overflow: hidden na samym elemencie. Jeśli rodzic ma overflow: hidden, cień zostanie przycięty.box-shadow?box-shadow: x y blur spread color. Pierwsze dwie to przesunięcia, *blur* zmiękcza krawędź, *spread* zmienia rozmiar przed rozmyciem, a kolor to dowolny kolor CSS (użyj rgba(), by kontrolować krycie). Dodaj inset na początku, aby umieścić cień wewnątrz elementu.box-shadow od filter: drop-shadow()?box-shadow podąża za prostokątem otaczającym element i szybko się maluje. drop-shadow() podąża za kanałem alfa tego, do czego go zastosowano (świetne dla SVG i przezroczystych PNG), ale jego renderowanie kosztuje więcej. Używaj box-shadow dla kart i przycisków, a drop-shadow() dla nieregularnych kształtów.transform: scale() gdzieś wyżej w drzewie.box-shadow wpływa na układ strony?overflow: visible.