Generator CSS box-shadow

Czym jest Generator CSS box-shadow?

Generator CSS box-shadow to darmowy edytor wizualny właściwości CSS box-shadow, stworzony dla programistów front-end i projektantów. Dodaj jedną lub więcej warstw cienia i dostosuj dla każdej warstwy offset-x, offset-y, promień rozmycia, promień rozszerzenia, kolor oraz flagę inset za pomocą prostych pól liczbowych i próbnika kolorów. Pole podglądu na tle szachownicy pokazuje połączony wynik w czasie rzeczywistym, a pełna deklaracja box-shadow — oddzielająca każdą warstwę przecinkami — jest generowana do skopiowania. Używaj go do tworzenia miękkich cieni uniesienia, ostrego neumorfizmu, efektów poświaty lub warstwowej głębi w stylu Material bez zapamiętywania kolejności wartości.

Jak używać Generator CSS box-shadow

1. Ustaw offset-x i offset-y pierwszej warstwy (w px), aby przesunąć cień w poziomie i pionie; wartości ujemne przesuwają go w lewo lub w górę.
2. Dostosuj promień rozmycia (jak miękki jest cień) i promień rozszerzenia (jak bardzo się powiększa lub kurczy).
3. Wybierz kolor za pomocą próbki lub wpisz wartość szesnastkową — 8-cyfrowa wartość szesnastkowa jak #00000040 ustawia przezroczystość cienia.
4. Zaznacz pole inset, aby narysować cień wewnątrz elementu zamiast na zewnątrz.
5. Kliknij Dodaj warstwę, aby nałożyć kolejny cień na wierzch, a następnie zmień kolejność, edytując wartości; usuń dowolną warstwę przyciskiem kosza.
6. Obserwuj aktualizację podglądu, a następnie skopiuj wygenerowany CSS box-shadow do swojego arkusza stylów.

Przykłady

x 0, y 4, rozmycie 12, rozszerzenie 0, kolor #00000040

box-shadow: 0px 4px 12px 0px #00000040;

Warstwa 1: 0 1 2 0 #0000001a · Warstwa 2: 0 8 24 -4 #00000026

box-shadow: 0px 1px 2px 0px #0000001a, 0px 8px 24px -4px #00000026;

inset zaznaczony, x 0, y 2, rozmycie 6, rozszerzenie 0, kolor #00000059

box-shadow: inset 0px 2px 6px 0px #00000059;

Najczęściej zadawane pytania

Jaka jest kolejność wartości box-shadow?

Każda warstwa jest zapisywana jako offset-x, offset-y, promień rozmycia, promień rozszerzenia, kolor, z opcjonalnym słowem kluczowym inset z przodu. To narzędzie zawsze wypisuje wszystkie cztery długości w px (offset-x, offset-y, rozmycie, rozszerzenie), więc kolejność jest jednoznaczna i łatwa do ręcznego dostosowania później.

Czy mogę dodać półprzezroczysty lub kolorowy cień?

Tak. Wpisz dowolny kolor CSS w polu koloru — pełna 8-cyfrowa wartość szesnastkowa jak #00000040 (dwie ostatnie cyfry to alfa) daje półprzezroczysty cień, a możesz używać kolorów nazwanych lub dowolnej wartości szesnastkowej. Próbka próbnika obsługuje pełne kolory #rrggbb; dla alfy edytuj pole tekstowe.

Jak nałożyć wiele cieni?

Kliknij Dodaj warstwę dla każdego dodatkowego cienia. Wygenerowany CSS oddziela każdą warstwę przecinkami w kolejności, od góry do dołu — pierwsza warstwa jest malowana jako ostatnia (na wierzchu). Użyj tego do warstwowej głębi w stylu Material lub do połączenia zewnętrznej poświaty z wyróżnieniem inset.

Co robi pole inset?

Inset rysuje cień wewnątrz obramowania elementu, tworząc wciśnięty lub wewnętrznie świecący wygląd zamiast zewnętrznego cienia rzucanego. Zaznaczaj je dla każdej warstwy; możesz mieszać cienie inset i zewnętrzne w tej samej wartości box-shadow.

Czy moje dane są gdzieś przesyłane?

Nie. Generator działa w całości w Twojej przeglądarce za pomocą JavaScript — Twoje kolory i wartości nigdy nie są wysyłane na serwer, więc działa prywatnie, a nawet offline po jednorazowym załadowaniu strony.