Generator CSS Box Shadow

Twórz wielowarstwowe wartości CSS box-shadow z podglądem na żywo, opcją inset i precyzyjną kontrolą.

Warstwy1
Twórz wielowarstwowe wartości CSS box-shadow z podglądem na żywo, opcją inset i precyzyjną kontrolą.
Ustawienia warstwy
Warstwa 1
px
px
px
px
Podgląd
Skopiuj wartość box-shadow do swojego CSS.
box-shadow
Wynik CSS
box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.2);

Czym jest box-shadow?

Twórz wielowarstwowe wartości CSS box-shadow z podglądem na żywo, opcją inset i precyzyjną kontrolą.

box-shadow to właściwość CSS rysująca jeden lub więcej cieni za (lub wewnątrz) elementu.

Każdy cień ma poziome i pionowe przesunięcie, promień rozmycia, opcjonalne rozprzestrzenienie oraz kolor z alfą; dodanie inset tworzy cień wewnętrzny.

Wiele warstw oddziela się przecinkami, co pozwala nakładać subtelne cienie dla głębi, poświaty lub ostrych krawędzi.

  • Małe przesunięcia z większym rozmyciem dają miękką wysokość.
  • Większa nieprzezroczystość i małe rozmycie dają ostrzejsze krawędzie.
  • Łącz cień zewnętrzny i wewnętrzny dla głębi.
  • Ogranicz liczbę warstw dla lepszej wydajności.