Generator CSS box-shadow
Generator CSS box-shadow z regulacją przesunięcia, rozmycia, rozproszenia, koloru i inset oraz podglądem cienia na żywo. Skopiuj gotowy kod CSS, za darmo w przeglądarce.
box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.15);Cień zewnętrzny
Osadź
Ostatnia aktualizacja: 2026 · Darmowe narzędzie online
Czym jest Generator CSS box-shadow?
Generator CSS box-shadow z regulacją przesunięcia, rozmycia, rozproszenia, koloru i inset oraz podglądem cienia na żywo. Skopiuj gotowy kod CSS, za darmo w przeglądarce.
Jak używać
- 1Wybierz preset— Zacznij szybko przyciskiem presetu.
- 2Dostosuj suwaki— Dostosuj cień za pomocą suwaków przesunięcia X/Y, rozmycia i rozprzestrzeniania.
- 3Podgląd— Sprawdź wynik w czasie rzeczywistym w podglądzie powyżej.
- 4Kopiuj CSS— Użyj przycisku kopiowania, aby uzyskać CSS box-shadow.
Powiązane narzędzia
Generator gradientu CSSWizualny generator gradientów CSS: liniowych, radialnych i stożkowych. Dodaj punkty kolorów, ustaw kąt i skopiuj gotowy kod CSS do tła i przycisków, za darmo w przeglądarce.
Generator CSS border-radiusGenerator CSS border-radius z ośmioma niezależnymi uchwytami narożników, suwakami i podglądem zaokrąglonego kształtu na żywo. Skopiuj gotowy kod CSS, za darmo w przeglądarce.
Generator CSS FlexboxPiaskownica CSS Flexbox z wizualnym edytorem justify-content, align-items, flex-direction i wrap oraz podglądem układu na żywo. Wygeneruj gotowy kod Flexbox, za darmo w przeglądarce.
Konwerter kolorówKonwerter kolorów między kodami HEX, RGB, HSL i OKLCH, ze współczynnikiem kontrastu WCAG dla dwóch barw. Sprawdzisz dostępność już przy doborze palety, za darmo w przeglądarce.
Najczęściej zadawane pytania
Tak, użyj przycisku 'Dodaj cień', aby nałożyć wiele cieni.
Tak, zaznacz pole wyboru Inset przy każdym cieniu, aby utworzyć cień wewnętrzny.
Dostępnych jest pięć presetów: Subtle, Medium, Large, Inset i Double.
Tak, możesz wpisać bezpośrednio rgba(0,0,0,0.15) w polu koloru.
Nie. Wszystkie obliczenia odbywają się w przeglądarce.