tigtools

Generator cieni CSS

Połącz jedną lub więcej warstw cienia, dostosuj je za pomocą suwaków i skopiuj gotową deklarację box-shadow.

Działa w przeglądarce Bez rejestracji

Ustawienia wstępne
Warstwy cienia
Warstwa 1
0px
1px
2px
0px
12%
Warstwa 2
0px
8px
24px
-4px
18%

Pierwsza warstwa jest rysowana nad pozostałymi.

12px

Jak używać

  1. Wybierz preset lub dostosuj przesunięcie, rozmycie, rozprzestrzenienie, kolor i nieprzezroczystość pierwszej warstwy.
  2. Dodaj kolejne warstwy, aby uzyskać bardziej naturalny efekt głębi, albo zaznacz „Inset”, aby dodać cień wewnętrzny.
  3. Dopasuj tło podglądu i kolor elementu do swojego projektu, a następnie skopiuj CSS.

Jak to działa

Wartość box-shadow określa dla każdej warstwy: przesunięcie w poziomie, przesunięcie w pionie, promień rozmycia, rozmiar rozprzestrzenienia i kolor. Opcjonalnie przed tymi wartościami można dodać inset. Dodatnie przesunięcia przemieszczają cień w prawo i w dół. Rozmycie zmiękcza krawędź i nie może być ujemne; rozprzestrzenienie powiększa (wartość dodatnia) lub zmniejsza (wartość ujemna) cień przed rozmyciem. Warstwy rozdziela się przecinkami, a pierwsza jest rysowana na wierzchu.

Realistyczny efekt głębi zwykle uzyskuje się, łącząc niewielki, wyraźny cień z większym, delikatniejszym cieniem o niskiej nieprzezroczystości — tak działa preset „Uniesiony”. Kolory są zapisywane w formacie rgba(), dzięki czemu nieprzezroczystość jest określona wprost. Cienie dopasowują się do border-radius elementu i nie zajmują miejsca w układzie, więc nie przesuwają innych elementów.

Cienie o bardzo dużym rozmyciu zastosowane na wielu elementach mogą spowalniać przewijanie na słabszych telefonach. Jeśli animujesz cień, zwykle płynniejszy efekt uzyskasz, stopniowo pokazując pseudo-element, który już ma cień, zamiast animować samo box-shadow.

Przykłady

Karta na jasnym tle

box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 8px 24px -4px rgba(0, 0, 0, 0.18); nadaje karcie wyraźną krawędź i delikatny efekt uniesienia.

Wskaźnik fokusu bez przesunięcia układu

Warstwa z przesunięciem 0, rozmyciem 0 i rozprzestrzenieniem 3px w kolorze marki tworzy jednolitą obwódkę wokół przycisku. W przeciwieństwie do obramowania nie zmienia rozmiaru elementu.

Wciśnięte pole tekstowe

inset 0 2px 6px 0 rgba(0, 0, 0, 0.25) sprawia, że pole tekstowe wygląda na lekko wklęsłe.

Często zadawane pytania

Czym różni się box-shadow od filter: drop-shadow()?

box-shadow dopasowuje się do obrysu elementu i jego border-radius oraz obsługuje rozprzestrzenienie i inset. drop-shadow() dopasowuje się do widocznego kształtu, również przezroczystych obszarów obrazów PNG lub SVG, ale nie obsługuje rozprzestrzenienia ani inset.

Dlaczego cień jest przycięty?

Element nadrzędny z overflow: hidden przycina wszystko, co wykracza poza jego obszar, w tym cienie. Dodaj w elemencie nadrzędnym padding lub usuń regułę overflow.

Ilu warstw użyć?

W większości interfejsów wystarczy jedna lub dwie warstwy. Większa liczba może zapewnić płynniejszy efekt, ale wymaga nieco więcej czasu na renderowanie, co ma znaczenie przy długich listach.

Prywatność

CSS jest generowany w Twojej przeglądarce. Żadne dane nie są przesyłane ani zapisywane.