Generator cieni
Generator box-shadow tworzy cień CSS za pomocą suwaków przesunięcia X i Y, rozmycia, rozciągnięcia, koloru, krycia i opcji inset, z gotowymi stylami Material Design i Tailwind, i zwraca dokładny kod CSS.
O tym narzędziu
Generator box-shadow tworzy cień CSS za pomocą suwaków przesunięcia X i Y, rozmycia, rozciągnięcia, koloru, krycia i opcji inset, z gotowymi stylami Material Design i Tailwind, i zwraca dokładny kod CSS.
Jak używać
- Zacznij od gotowego stylu albo zostań przy Custom.
- Dostosuj przesunięcie X/Y, rozmycie, rozciągnięcie i krycie.
- Wybierz kolor cienia i zaznacz Inset, aby uzyskać cień wewnętrzny.
- Kliknij Copy CSS, aby wkleić regułę box-shadow.
Warto wiedzieć
- Składnia box-shadow to: [inset] offset-x offset-y blur-radius spread-radius color.
- Większy promień rozmycia zmiękcza krawędź; spread powiększa lub zmniejsza cień przed rozmyciem.
- Ciemne cienie o niskim kryciu (około 10–25%) wyglądają naturalniej niż pełna czerń.
- Można nakładać wiele cieni, oddzielając je przecinkami.
- Słowo kluczowe inset rysuje cień wewnątrz obramowania elementu.
Działa w całości w przeglądarce — nic, co wpiszesz, nie jest wysyłane ani zapisywane.
Najczęściej zadawane pytania
Jak dodać cień do diva w CSS?
Użyj właściwości box-shadow, np. box-shadow: 0 4px 12px 0 rgba(0,0,0,0.2); to narzędzie napisze wartość za Ciebie.
Czym różni się blur od spread?
Blur określa, jak miękka jest krawędź cienia. Spread powiększa lub zmniejsza cień, zanim zostanie zastosowane rozmycie.
Jak zrobić cień wewnętrzny?
Dodaj słowo kluczowe inset na początku wartości albo zaznacz Inset w narzędziu.
Czy mogę użyć kilku cieni box-shadow?
Tak. Oddziel cienie przecinkami; warstwowe cienie, jak w stylach Material i Tailwind, wyglądają bardziej realistycznie.