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.