Generator CSS Box Shadow

Czym jest box-shadow CSS?

Właściwość box-shadow CSS dodaje efekty cienia wokół ramki elementu. Cienie są podstawowym narzędziem do tworzenia głębi, elewacji i hierarchii wizualnej w projektowaniu stron internetowych. Dobrze zaprojektowany cień może sprawić, że karta będzie wyglądać jak unosząca się nad stroną lub że przycisk będzie miał wciśnięty wygląd.

Box-shadow przyjmuje wiele parametrów: przesunięcie poziome, przesunięcie pionowe, promień rozmycia, promień rozłożenia i kolor. Możesz też dodać słowo kluczowe inset, aby tworzyć cienie wewnętrzne. Wiele cieni może być nałożonych na jeden element przez oddzielenie ich przecinkami, a renderowane są od tyłu do przodu.

Szczegółowa składnia box-shadow

Pełna składnia to: box-shadow: [inset] offset-x offset-y [blur-radius] [spread-radius] color. Wartości offset-x i offset-y są wymagane i definiują pozycję cienia względem elementu. Wartości dodatnie przesuwają cień w prawo i w dół. Blur-radius zmiękcza krawędzie — wartość 0 tworzy ostry cień. Spread-radius rozszerza lub zmniejsza cień — wartości ujemne tworzą ciaśniejszy cień.

Jak korzystać z tego narzędzia

Dostosuj suwaki przesunięcia poziomego, pionowego, rozmycia, rozłożenia i koloru. Podgląd aktualizuje się w czasie rzeczywistym, abyś mógł zobaczyć dokładnie, jak będzie wyglądał cień. Przełącz opcję inset dla cieni wewnętrznych. Dodaj wiele warstw cieni dla bardziej realistycznych efektów głębi. Gdy będziesz zadowolony, skopiuj wygenerowany kod CSS.

Wskazówki dotyczące efektywnych cieni

• Używaj subtelnych cieni z niską przezroczystością dla czystego, nowoczesnego, podwyższonego wyglądu.
• Nakładaj wiele cieni dla bardziej realistycznej głębi — ostry bliski cień plus miękki rozproszony cień naśladuje oświetlenie w rzeczywistym świecie.
• Większe rozmycie z niewielkim przesunięciem tworzy miękki efekt unoszenia, idealny dla kart i modali.
• Ujemne rozłożenie tworzy ciaśniejszy, bardziej skupiony cień przydatny dla subtelnych obramowań.
• Utrzymuj kierunek cienia spójny na całej stronie — niespójne źródła światła wyglądają nienaturalnie.

System elewacji Material Design

Material Design firmy Google definiuje poziomy elewacji od 0dp do 24dp, każdy z określonymi wartościami cieni. Wyższa elewacja oznacza większe wartości rozmycia i przesunięcia. System ten zapewnia spójną hierarchię wizualną w całej aplikacji. Nawet jeśli nie stosujesz Material Design, zasada używania spójnych poziomów elewacji jest cenna dla każdego systemu projektowego.

Wpływ na wydajność

Cienie box-shadow są akcelerowane przez GPU w nowoczesnych przeglądarkach i mają minimalny wpływ na wydajność przy typowym użyciu. Jednak bardzo duże promienie rozmycia (50px+) na wielu elementach jednocześnie mogą powodować spadki liczby klatek podczas animacji. Jeśli musisz animować cienie, rozważ użycie transform: scale() do powiększania pseudoelementu ze statycznym cieniem zamiast animowania wartości cieni bezpośrednio.

Często zadawane pytania

Jaka jest różnica między box-shadow a drop-shadow?

box-shadow stosuje się do prostokątnego pola elementu, łącznie z wypełnieniem i obramowaniem. Funkcja filter: drop-shadow() podąża za rzeczywistym kształtem elementu, łącznie z przezroczystymi obszarami w obrazach. Używaj drop-shadow dla elementów nieprościokątnych, takich jak ikony lub obrazy PNG z przezroczystością.

Czy mogę używać box-shadow do tworzenia obramowań?

Tak. Box-shadow z zerowym rozmyciem i dodatnim rozłożeniem działa jak obramowanie, które nie wpływa na układ. Technika ta jest przydatna, gdy potrzebujesz wizualnego obramowania bez zmiany wymiarów elementu, na przykład podczas stanów hover.