Box Shadow Generator

O tym narzędziu

Poziomy — wartości dodatnie przesuwają cień w prawo, ujemne w lewo. Pionowy — dodatnie w dół, ujemne w górę. Rozmycie — większe wartości tworzą miększe, bardziej rozmyte cienie. Rozproszenie — dodatnie powiększa cień, ujemne zmniejsza.

Włącz wewnętrzny, aby tworzyć wewnętrzne cienie. Dodaj wiele cieni przyciskiem "+ Dodaj cień" — są oddzielane przecinkami w CSS, nakładane od przodu do tyłu.

Jak używać

1. Dostosuj suwaki Poziomy i Pionowy, aby ustawić przesunięcie cienia.
2. Zwiększ Rozmycie dla miękkiego cienia lub ustaw 0 dla ostrego cienia.
3. Użyj Rozproszenia, aby powiększyć lub zmniejszyć cień poza element.
4. Kliknij "+ Dodaj cień", aby nałożyć wiele cieni dla bogatszych efektów.

Przypadki użycia

Projektanci używają box-shadow do głębi i wysokości w komponentach kart. Cienie wewnętrzne tworzą efekty wciśniętych przycisków. Kilka nałożonych cieni tworzy realistyczne oświetlenie ze światłem otoczenia i głównym.

Często zadawane pytania

• Co to jest opcja inset? — Cienie wewnętrzne pojawiają się wewnątrz granicy elementu zamiast na zewnątrz. Przydatne do tworzenia efektów wciśnięcia na polach wejściowych i przyciskach.
• Czy mogę dodać wiele cieni? — Tak. Kliknij "+ Dodaj cień", aby dodać kolejną warstwę cienia. Wszystkie cienie łączą się w jedną deklarację box-shadow oddzieloną przecinkami.
• Co robi ujemna wartość rozproszenia? — Ujemne rozproszenie kurczy cień mniejszy niż element. W połączeniu z przesunięciem i rozmyciem tworzy subtelny cień widoczny tylko z jednej strony.