Generator Box Shadow CSS Online
Twórz cienie CSS z podglądem na żywo. Wiele warstw, inset, rozmycie i rozpiętość.
box-shadow: 5px 5px 15px 0px rgba(0, 0, 0, 0.2);
Dlaczego warto
Idealne cienie CSS bez zgadywania wartości
Podgląd na żywo
Dostosuj offset, rozmycie, rozpiętość i kolor suwakami. Wyniki są natychmiastowe.
Wiele warstw
Układaj cienie w stos dla realistycznych efektów. Łatwo dodawaj i usuwaj warstwy.
Cienie wewnętrzne
Przełączaj między cieniami zewnętrznymi a wewnętrznymi jednym kliknięciem.
Bez instalacji
Wszystko w przeglądarce. Nie potrzebujesz zewnętrznych narzędzi do projektowania.
Jak to działa
Trzy kroki, żadnych komplikacji
Skonfiguruj cień
Dostosuj offset X, offset Y, promień rozmycia, promień rozpiętości i kolor za pomocą wizualnych kontrolek. Włącz 'inset' dla cieni wewnętrznych.
Dodaj wiele cieni
Właściwość box-shadow akceptuje wiele cieni oddzielonych przecinkami. Łącz warstwy, aby tworzyć realistyczne efekty uniesienia lub głębi.
Skopiuj kod CSS
Kod box-shadow jest generowany w czasie rzeczywistym. Skopiuj kompletną właściwość gotową do Twojego arkusza stylów.
FAQ
Masz pytania?
Tak. Właściwość box-shadow akceptuje listę rozdzielaną przecinkami: box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24). Cienie są renderowane w kolejności — pierwszy na liście pojawia się na wierzchu. Jest to niezbędne dla realistycznych wielowarstwowych cieni, zgodnie z zasadą, że naturalne cienie mają składową umbra (ciemną i ostrą) i składową penumbra (rozproszoną i szeroką).
Słowo kluczowe 'inset' zmienia cień z zewnętrznego na wewnętrzny. Zamiast rozchodzić się na zewnątrz elementu, cień pojawia się wewnątrz jego obramowania, tworząc złudzenie, że element jest wgłębiony lub wciśnięty. Stosuje się go do symulowania wciśniętych przycisków, aktywnych pól formularzy i odwróconych efektów reliefu (jak w projektowaniu neumorficznym).
Box-shadows są renderowane podczas fazy rysowania przeglądarki i mogą powodować kosztowne ponowne rysowania podczas animacji. W przeciwieństwie do transform i opacity (działających w warstwie kompozytora bez ponownego rysowania), animowanie box-shadow może powodować spadki liczby klatek. Zespół Chrome zaleca używanie filter: drop-shadow() zamiast dla elementów wymagających animowanych cieni, lub stosowanie pseudoelementów z animowaną przezroczystością do symulowania efektu z lepszą wydajnością.
text-shadow odnosi się wyłącznie do wyrenderowanego tekstu, podążając za konturami każdego glifu. box-shadow odnosi się do modelu pudełkowego elementu (border-box), całkowicie ignorując zawartość. Zastosowanie box-shadow do fragmentu tekstu tworzy prostokątny cień (lub zaokrąglony, jeśli element ma border-radius). Dla cienia podążającego za dokładnym kształtem zawartości (w tym przezroczystego tekstu lub obrazów) użyj filter: drop-shadow().
Realistyczne cienie łączą co najmniej dwie warstwy: cień o wysokiej przezroczystości i małym rozmyciu dla umbry oraz cień o niskiej przezroczystości i dużym rozmyciu dla penumbry. System uniesień Material Design Google'a definiuje 24 poziomy uniesienia, każdy z określonymi wartościami box-shadow. Na przykład uniesienie 8 (pływające karty) używa: box-shadow: 0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12).
CSS box-shadow: renderowanie, neumorfizm i uniesienia Material Design
Właściwość box-shadow została wprowadzona w CSS3 (moduł Backgrounds and Borders, W3C) i uzyskała pełne wsparcie bez prefiksów w 2012 roku. Przed CSS3 programiści symulowali cienie za pomocą obrazów PNG z podziałem na 9 fragmentów (nine-patch), techniki wymagającej dużej przepustowości i nakładów na utrzymanie. Składnia box-shadow definiuje kolejno: offset-x, offset-y, blur-radius, spread-radius i kolor, z opcjonalnym słowem kluczowym 'inset'. Parametr spread jest unikalny dla box-shadow i nie ma odpowiednika w filter: drop-shadow() ani text-shadow.
Renderowanie cieni w nowoczesnych przeglądarkach wykorzystuje warstwy kompozytora. Gdy element ma box-shadow, przeglądarka przenosi go do własnej warstwy malowania, aby renderować cień niezależnie. Ma to implikacje dla pamięci GPU: każda dodatkowa warstwa zużywa pamięć VRAM. Na urządzeniach z ograniczoną pamięcią VRAM (słabsze urządzenia mobilne) nadmiar box-shadows może powodować spadki liczby klatek. Alternatywa filter: drop-shadow() korzysta z potoku filtrów CSS, który w Chrome jest przetwarzany przez GPU wydajniej, choć zachowuje się inaczej na elementach z border-radius.
Neumorfizm, trend projektowania UI, który stał się wirusowy w grudniu 2019 roku po poście na Dribbble autorstwa Alexandra Plyuto, opiera się wyłącznie na box-shadows do tworzenia iluzji elementów wytłaczanych z tła. Typowy przepis łączy dwa cienie: jasny (pozytywny offset, jakby światło padało z górnego lewego rogu) i ciemny (negatywny offset). System uniesień Material Design Google'a, udokumentowany na material.io, definiuje 24 poziomy uniesień z matematycznie obliczonymi wartościami box-shadow, konsekwentnie symulując światło otoczenia i bezpośrednie na całym interfejsie.