Generator box-shadow
Twórz wielowarstwowe cienie CSS z podglądem na żywo.
- Natychmiast
- Za darmo
- Prywatnie (przetwarzane lokalnie)
- Bez rejestracji
Cienie z prawdziwą głębią, bez zgadywania
Ręczne dobieranie cienia oznacza przeładowanie strony dziesięć razy. Tutaj przesuwasz suwaki, a podgląd reaguje na żywo. Nakładaj kilka warstw dla realistycznej głębi i kopiuj dokładny CSS.
-
Dostosuj warstwę
Przesunięcie X/Y, rozmycie, rozszerzenie, kolor i krycie.
-
Dodaj warstwy
Połącz ostry i rozproszony cień dla naturalnego wyglądu.
-
Skopiuj CSS
Pełna właściwość box-shadow, gotowa do wklejenia.
Zrozumieć składnię
| Wartość | Rola |
|---|---|
| offset-x | Przesunięcie poziome (w prawo jeśli dodatnie) |
| offset-y | Przesunięcie pionowe (w dół jeśli dodatnie) |
| blur | Promień rozmycia (większy = bardziej miękki) |
| spread | Powiększa (+) lub zmniejsza (−) cień |
| color | Kolor, często rgba() dla krycia |
| inset | Umieszcza cień wewnątrz pudełka |
Wszystko generowane jest w przeglądarce. Przykład domyślny: box-shadow: 0px 10px 25px -5px rgba(124, 58, 237, 0.35);
Najczęstsze pytania
Co oznaczają wartości box-shadow?
Po kolei: przesunięcie poziome, przesunięcie pionowe, promień rozmycia, promień rozszerzenia, a następnie kolor. Przykład: „0 10px 25px -5px rgba(124, 58, 237, 0.35)” przesuwa cień o 10px w dół, rozmywa go na 25px i zmniejsza o 5px.
Do czego służy promień rozszerzenia (spread)?
Powiększa (wartość dodatnia) lub zmniejsza (wartość ujemna) cień przed rozmyciem. Ujemny spread świetnie sprawdza się przy miękkich, ściągniętych cieniach — jak karta unosząca się nieco nad stroną.
Jak nałożyć kilka cieni?
Oddziel każdą warstwę przecinkiem. Pierwsza wymieniona jest rysowana na wierzchu. Połączenie wąskiego, ostrego cienia z szerokim, rozproszonym wygląda znacznie naturalniej niż pojedynczy cień.
Jaka jest różnica między box-shadow a drop-shadow?
box-shadow podąża za prostokątem pudełka (i jego border-radius). filter: drop-shadow() podąża za rzeczywistym kształtem, łącznie z przezroczystością — idealne dla wyciętych PNG i SVG. Dla karty lub przycisku właściwym wyborem jest box-shadow.