Generator Cieni CSS

Dokumentacja

Czym jest CSS box-shadow?

Właściwość CSS box-shadow dodaje jeden lub więcej efektów cienia wokół ramki elementu. Jest definiowana przez przesunięcia względem elementu, promienie rozmycia i rozszerzenia, kolor oraz opcjonalne słowo kluczowe inset. Wiele cieni jest rozdzielanych przecinkami i renderowanych od przodu do tyłu.

Składnia box-shadow

box-shadow: [inset] offset-x offset-y [blur-radius] [spread-radius] color;
offset-x: Odległość pozioma. Dodatnia = prawo, ujemna = lewo.
offset-y: Odległość pionowa. Dodatnia = dół, ujemna = góra.
blur-radius (opcjonalny, domyślnie 0): Większe wartości tworzą bardziej miękki, rozproszony cień.
spread-radius (opcjonalny, domyślnie 0): Wartości dodatnie rozszerzają cień, ujemne go zmniejszają.
inset (opcjonalny): Przenosi cień do wnętrza elementu.

Używanie wielu warstw cienia

Łączenie wielu cieni tworzy realistyczne efekty głębi. Popularna technika to połączenie ciasnego, ciemnego cienia blisko elementu (dla definicji) z dużym, delikatnym cieniem dalej (dla głębi). Material Design i nowoczesne systemy projektowania używają warstwowych cieni do komunikowania elewacji.

Wskazówki projektowe dla cieni

Używaj kolorów rgba() lub hsla() — półprzezroczyste cienie wyglądają bardziej naturalnie niż nieprzezroczyste.
Utrzymuj spójne źródło światła — używaj tego samego kierunku przesunięcia w całym interfejsie.
Unikaj czystej czerni — użyj ciemnego odcienia koloru marki dla bardziej miękkich cieni.
Wydajność — box-shadow wyzwala operacje malowania. Dla animowanych elementów preferuj filter: drop-shadow().

Prywatność

Całe generowanie cieni odbywa się w 100% w Twojej przeglądarce. Żadne dane nie są wysyłane na serwer.