Generator cieni CSS (box-shadow)
Ukształtuj cień suwakami i skopiuj CSS.
Pole i tło
Działa w przeglądarce. Nic, co wpiszesz, nie jest nigdzie wysyłane.
- Do 8 warstw naraz
- Cienie wewnętrzne
- 6 gotowych ustawień
Jak zrobić cień CSS (box-shadow)
- Zacznij od gotowego ustawienia, albo przesuń suwaki przesunięcia, rozmycia i rozciągnięcia.
- Dodaj warstwy, aby uzyskać miększy, bardziej naturalny cień.
- Skopiuj linię box-shadow do swojego CSS.
Co robi każda wartość box-shadow
| Wartość | Znaczenie | Typowy zakres |
|---|---|---|
| Przesunięcie X | Przesuwa cień w prawo, albo w lewo, jeśli ujemne | -100 do 100px |
| Przesunięcie Y | Przesuwa cień w dół, albo w górę, jeśli ujemne | -100 do 100px |
| Rozmycie | Zmiękcza krawędź; 0 daje cień z ostrą krawędzią | 0 do 200px |
| Rozciągnięcie | Powiększa albo zmniejsza cień, zanim zostanie rozmyty | -100 do 100px |
| Krycie | Jak jednolicie wygląda kolor cienia | 10 do 30% dla naturalnego wyglądu |
Wartości startowe dla popularnych efektów
| Ustawienie | Przesunięcie Y | Rozmycie | Rozciągnięcie | Krycie |
|---|---|---|---|---|
| Miękki | 10px | 30px | -5px | 20% |
| Ostry | 6px (także X) | 0px | 0px | 100% |
| Poświata | 0px | 24px | 4px | 55% |
| Wewnętrzny | 2px | 6px | 0px | 25% |
Ustawienia Warstwowy i Unoszący się bazują na tych wartościach, układając dwa albo trzy cienie naraz, czego nie da się odtworzyć jedną warstwą.
Wskazówki na naturalnie wyglądające cienie
- Prawdziwe światło rzadko rzuca w pełni czarny cień. Użyj krycia 10 do 30 procent i przechyl kolor w stronę odcienia tła, żeby uzyskać łagodniejszy efekt.
- Ułóż 2 albo 3 cienie: mały, ciasny blisko pola i większy, bardziej rozmyty dalej od niego, tak jak zbudowane są ustawienia Warstwowy i Unoszący się.
- Ujemne rozciągnięcie z dużym przesunięciem pionowym daje wygląd unoszącej się karty, popularny w nowoczesnych interfejsach.
- Element nadrzędny z overflow: hidden przycina cień dokładnie tak samo, jak przycina zawartość, więc lepiej dodać padding do elementu nadrzędnego, niż usuwać overflow wszędzie.
Generator cieni box-shadow: najczęstsze pytania
Co oznaczają wartości box-shadow?
Po kolei: przesunięcie w poziomie, przesunięcie w pionie, promień rozmycia, promień rozciągnięcia i kolor. Dodatnie przesunięcia przesuwają cień w prawo i w dół, a słowo kluczowe inset rysuje go wewnątrz pola.
Jak sprawić, żeby cień wyglądał naturalnie?
Ułóż dwa albo trzy miękkie cienie o niskim kryciu: mały, ciasny blisko pola i większy, bardziej rozmyty dalej od niego. Prawdziwe cienie rzadko są w pełni czarne przy pełnej mocy.
Co robi rozciągnięcie (spread)?
Rozciągnięcie powiększa albo zmniejsza cień, zanim zostanie rozmyty. Ujemne rozciągnięcie z dużym przesunięciem pionowym daje wygląd unoszącej się karty.
Dlaczego mój cień jest ucięty?
Element nadrzędny z overflow: hidden przycina wszystko narysowane poza swoim polem, łącznie z cieniami. Dodaj padding do elementu nadrzędnego albo usuń ustawienie overflow.
Ile warstw cienia mogę ułożyć?
Do 8 na tej stronie. Samo CSS nie ma stałego limitu warstw box-shadow, ale więcej niż 3 albo 4 rzadko wygląda inaczej, a kosztuje więcej przy renderowaniu.
Czy cień zmienia rozmiar albo odstępy elementu?
Nie. box-shadow jest czysto wizualny i nigdy nie wpływa na układ, w przeciwieństwie do border albo outline, więc sąsiednie elementy nigdy się nie przesuwają, gdy go dodasz albo zmienisz rozmiar.