DevTulz Online

Generator CSS Box Shadow

Tło

Czym jest CSS Box Shadow?

Właściwość CSS box-shadow dodaje efekty cienia wokół ramki elementu. Cienie można przesuwać, rozmywać, rozpraszać, kolorować i ustawiać jako inset (cień wewnętrzny). Wiele cieni oddzielonych przecinkami można nakładać dla bogatych efektów. Ten generator pozwala wizualnie tworzyć złożone wielowarstwowe cienie i kopiować gotowy do wklejenia CSS do schowka.

Jak używać Generatora Box Shadow

  1. Dostosuj suwaki dla Offset X/Y, Blur i Spread, aby ustawić i ukształtować cień.

  2. Kliknij na próbkę koloru, aby wybrać kolor cienia i użyj suwaka Opacity dla przezroczystości.

  3. Przełącz 'Inset', aby utworzyć wewnętrzny blask lub efekt wciśnięcia.

  4. Kliknij '+ Dodaj warstwę', aby nakładać wiele cieni na siebie.

  5. Skopiuj wygenerowany CSS i wklej go do swojego arkusza stylów.

Często Zadawane Pytania

Jaka jest różnica między box-shadow a filtrem drop-shadow? box-shadow dodaje cienie wokół prostokątnego pola obramowania elementu i obsługuje cienie wewnętrzne. Filtr CSS: drop-shadow() stosuje się do wizualnego kształtu elementu (w tym przezroczystości), co powoduje, że podąża za nieprostokątnymi obrysami, takimi jak PNG-i z przezroczystymi tłami.

Jak utworzyć efekt podniesienia karty Material Design? Połóż dwa cienie box-shadow: miękki cień otoczenia (duże rozmycie, niska nieprzezroczystość, lekkie rozrzedzenie) i cień klucza (mniejsze rozmycie, wyższa nieprzezroczystość, kierunkowe przesunięcie). Na przykład: 0 2px 4px rgba(0,0,0,0.12), 0 4px 16px rgba(0,0,0,0.08).

Czy box-shadow wpływa na układ strony? Nie. box-shadow nie wpływa na rozmiar ani pozycję elementu w przepływie dokumentu. W przeciwieństwie do outline, nie zajmuje miejsca w układzie i nie przesuwa innych elementów.

Czy mogę animować box-shadow? Tak. box-shadow można animować za pomocą przejść CSS i animacji. Dla wydajności wolniej przechodzić box-shadow tylko w razie potrzeby — przeglądarki nie mogą przyspieszyć zmian box-shadow na GPU tak efektywnie jak transform lub opacity.

Keywords: generator CSS box shadow, box-shadow CSS, narzędzie cienia CSS, CSS drop shadow, cień wewnętrzny, cień wielowarstwowy, CSS shadow online