Generator Box Shadow - Cień CSS z Podglądem i Tailwind

Generator box-shadow CSS: cień z podglądem i gotowym kodem

Cień karty 0 4px 12px w czerni z kryciem 25 % to jedna linijka CSS, ale trudno ją sobie wyobrazić bez podglądu. Generator rysuje cień na prostokącie 200 × 120 px, podaje regułę box-shadow, klasę Tailwind CSS v4 i liczy, o ile pikseli cień wystaje poza element z każdej strony. Można też wkleić gotową wartość z arkusza stylów, nawet z kilkoma warstwami, i sprawdzić, co robi każda z nich.

4 długości

x, y, rozmycie, rozciągnięcie

2 × rozmycie

szerokość widocznego przejścia

1. warstwa

rysowana na wierzchu

Jak wygenerować box-shadow - krok po kroku

Przesunięcie w poziomie i w pionie - dodatnie x przesuwa cień w prawo, dodatnie y w dół. Cienie kart mają zwykle x = 0 i y od 1 do 25 px.
Rozmycie - zero daje ostrą krawędź, większa liczba miękkie przejście. Wartość ujemna jest nieprawidłowa.
Rozciągnięcie - dodatnie powiększa cień we wszystkie strony, ujemne go zmniejsza i chowa boki pod elementem.
Kolor i krycie - kolor szesnastkowo, krycie w procentach. Puste pola dają czerń z kryciem 25 %.
Rodzaj cienia - zewnętrzny unosi element nad tło, wewnętrzny (inset) wygląda jak wgłębienie.
Zaokrąglenie rogów elementu - opcjonalnie, dla podglądu i promienia rogu cienia po rozciągnięciu.
Albo wklej wartość - cała deklaracja z arkusza, także kilka cieni po przecinku. Wklejka ma pierwszeństwo przed polami.
Odczytaj wynik - kod CSS, klasa Tailwind, liczba warstw i zasięg cienia poza element: góra, prawo, dół, lewo.

Co robi każda wartość w box-shadow

Specyfikacja W3C CSS Backgrounds and Borders Level 3 opisuje pojedynczy cień jako 2-4 długości, opcjonalny kolor i opcjonalne słowo inset, w dowolnej kolejności tych trzech grup. Pominięte długości są zerami, a pominięty kolor przyjmuje currentColor, czyli kolor tekstu elementu. Dlatego wartość 3px 3px narysuje ostry cień w kolorze napisów, co zwykle wygląda na pomyłkę.

Rozmycie według tej samej specyfikacji ma przybliżać rozmycie Gaussa o odchyleniu standardowym równym połowie podanej wartości. W praktyce przejście od pełnego koloru do przezroczystości ma szerokość około dwóch promieni rozmycia i jest wyśrodkowane na krawędzi cienia. Przy rozmyciu 12 px cień blednie więc na pasie około 24 px, z czego połowa wychodzi na zewnątrz kształtu cienia. Na tym opiera się kafel z zasięgiem: przesunięcie plus rozciągnięcie plus rozmycie.

Rozciągnięcie przesuwa proste krawędzie cienia. Cień zewnętrzny zaczyna się od krawędzi obramowania i jest przycięty wewnątrz elementu, więc nie prześwituje przez półprzezroczyste tło. Cień wewnętrzny rysuje się w obszarze wypełnienia i jest przycięty na zewnątrz. Kilka cieni rozdziela się przecinkami, a pierwszy z listy leży na wierzchu.

Cienie Tailwind CSS v4 - wartości i zasięg

Wartości z pliku theme.css Tailwind CSS v4. Zasięg policzono tym generatorem po wklejeniu każdej wartości. Gdy wynik pól albo wklejki jest identyczny z którymś zestawem, generator podaje gotową klasę, a w pozostałych przypadkach klasę z wartością dowolną shadow-[...].

Klasa	Wartość box-shadow	Góra	Boki	Dół
shadow-2xs	0 1px rgb(0 0 0 / 0.05)	0 px	0 px	1 px
shadow-xs	0 1px 2px 0 rgb(0 0 0 / 0.05)	1 px	2 px	3 px
shadow-sm	0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)	2 px	3 px	4 px
shadow-md	0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)	1 px	5 px	9 px
shadow-lg	0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)	2 px	12 px	22 px
shadow-xl	0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)	0 px	20 px	40 px
shadow-2xl	0 25px 50px -12px rgb(0 0 0 / 0.25)	13 px	38 px	63 px
inset-shadow-2xs	inset 0 1px rgb(0 0 0 / 0.05)	wewnątrz elementu
inset-shadow-xs	inset 0 1px 1px rgb(0 0 0 / 0.05)	wewnątrz elementu
inset-shadow-sm	inset 0 2px 4px rgb(0 0 0 / 0.05)	wewnątrz elementu

Od shadow-md w górę każdy zestaw ma ujemne rozciągnięcie. Dzięki temu boki dostają mniej cienia niż dół, a przy shadow-xl cień nad górną krawędzią w ogóle nie wychodzi: 0 px przy 40 px pod spodem.

Atlas cieni: sześć typowych zastosowań

Każdy przykład można wkleić do generatora. Zasięg w ostatniej kolumnie to wynik z kafla w kolejności góra / prawo / dół / lewo.

Rodzaj	Przykładowa wartość	Kiedy	Zasięg (px)
Miękki cień karty	0 4px 12px rgb(0 0 0 / 0.25)	karty, okna, menu	8 / 12 / 16 / 12
Cień tylko pod spodem	0 8px 6px -6px rgb(0 0 0 / 0.25)	pasek nagłówka, przyklejone menu	0 / 0 / 8 / 0
Ostry cień przesunięty	6px 6px #1e293b	wyraziste przyciski i kafle	0 / 6 / 6 / 0
Obrys z rozciągnięcia	0 0 0 2px #2563eb	zaznaczenie pola bez przesuwania układu	2 / 2 / 2 / 2
Wgłębienie	inset 0 2px 4px rgb(0 0 0 / 0.05)	pola tekstowe, wciśnięty przycisk	wewnątrz
Cień ukryty pod elementem	0 0 4px -6px #000	błąd: nic nie widać	0 / 0 / 0 / 0

Zależności, które łatwo przeoczyć

Rogi cienia zaokrąglają się inaczej niż rogi elementu. Przy rozciągnięciu W3C każe dodać je do promienia rogu, ale gdy promień jest mniejszy od rozciągnięcia, rozciągnięcie mnoży się najpierw przez 1 + (r - 1)³, gdzie r to promień podzielony przez rozciągnięcie. Przykład ze specyfikacji: róg 10 px i rozciągnięcie 20 px dają róg cienia 27,5 px, a nie 30 px. Prosty róg zostaje prosty. Generator pokazuje tę liczbę po wpisaniu zaokrąglenia elementu.

Cień nie zajmuje miejsca. Specyfikacja mówi wprost, że cienie nie wpływają na układ i nie powiększają obszaru przewijania. Dlatego obrys z rozciągnięcia nie przesuwa sąsiednich elementów, w przeciwieństwie do border, i dlatego rodzic z overflow: hidden po prostu cień przycina.

Kolejność warstw działa odwrotnie niż w warstwach programów graficznych. Pierwszy cień z listy leży na wierzchu, kolejne pod nim. Ostry obrys warto więc wpisać na początku, a szeroki, rozmyty cień na końcu.

Półprzezroczyste tło nie odsłania cienia. Cień zewnętrzny jest przycięty wewnątrz krawędzi obramowania, więc karta z tłem o kryciu 50 % nie pokaże przez siebie własnego cienia.

Jak czytać wynik generatora

Element wyniku	Co oznacza
Kod CSS	najkrótszy poprawny zapis: zera na końcu pominięte, wklejone rem i em bez zmian
Tailwind (gotowa klasa)	wynik równy jednemu z zestawów v4
Tailwind (wartość dowolna)	shadow-[...] z podkreśleniami zamiast spacji, działa bez zmian w konfiguracji
Cień wystaje poza element	odstęp od krawędzi rodzica z overflow: hidden, przy którym ucięty zostaje najwyżej prawie przezroczysty skraj rozmycia
Ostrzeżenie o currentColor	brak koloru: cień zmieni barwę razem z tekstem

Zasięg to przybliżenie oparte na opisie rozmycia w specyfikacji W3C: na skraju przejścia piksele są prawie, ale nie całkiem, przezroczyste.

Pytania o box-shadow w CSS

Jak zrobić cień tylko na dole elementu?

Ustaw przesunięcie y i ujemne rozciągnięcie równe rozmyciu, np. 0 8px 6px -6px. Rozmycie 6 px i rozciągnięcie -6 px znoszą się na bokach i u góry, a w dół cień wystaje o 8 px.

Dlaczego mojego cienia nie widać?

Najczęstsze powody: rodzic ma overflow: hidden i przycina cień, przesunięcie i rozmycie są zerowe, krycie jest bliskie zera albo ujemne rozciągnięcie jest większe niż rozmycie. Wklej wartość do generatora: kafel zasięgu z samymi zerami albo ostrzeżenie o cieniu pod elementem wskaże przyczynę.

Jak dodać kilka cieni naraz?

Rozdziel je przecinkami w jednej deklaracji. Pierwszy z listy jest na wierzchu. Zestawy Tailwind od shadow-sm do shadow-xl mają po 2 warstwy: większą, bardziej rozmytą i mniejszą, ostrzejszą. Generator przyjmuje do 12 warstw we wklejce.

Czym różni się cień zewnętrzny od inset?

Zewnętrzny rysuje się poza krawędzią obramowania, jakby element był uniesiony nad tłem. Wewnętrzny, ze słowem inset, rysuje się w środku, jakby element był wycięty w tle. Przy wewnętrznym dodatnie rozciągnięcie zwiększa obszar cienia, a więc zmniejsza jego wewnętrzny obrys i zaokrąglenie rogów.

Jak zrobić obramowanie, które nie zmienia rozmiaru elementu?

Użyj samego rozciągnięcia: 0 0 0 2px z wybranym kolorem. Cień nie wpływa na układ, więc obrys pojawi się bez przesuwania tekstu i sąsiadów. Z dodatkiem inset obrys znajdzie się w środku elementu.

Czy mogę wkleić wartość w rem albo z rgba()?

Tak. Generator przyjmuje px, rem i em oraz kolory szesnastkowe, rgb(), rgba(), hsl() i 148 nazw kolorów CSS. Nieznaną nazwę albo funkcję koloru z błędną liczbą wartości wskaże jako błąd. Rem i em przelicza przy 16 px tylko na potrzeby zasięgu i porównania z Tailwind, a w kodzie zostawia je tak, jak były. Liczba różna od zera bez jednostki jest w CSS błędem i generator ją wskaże.