Generator CSS box-shadow

Twórz CSS box-shadow z podglądem na żywo.

Programista

Dostosuj przesunięcie poziome i pionowe, rozmycie, rozproszenie i kolor, aby zbudować box-shadow. Podgląd aktualizuje się na żywo. Skopiuj CSS. Działa w przeglądarce.

box-shadow: 0 4px 6px 0 rgba(0,0,0,0.2);

O generatorze CSS Box Shadow

Box-shadow dodaje cień za elementem. To narzędzie pozwala ustawić przesunięcie poziome i pionowe, promień rozmycia, rozproszenie i kolor (z opcjonalnym cieniem wewnętrznym). Podgląd i CSS aktualizują się w miarę zmian wartości. Skopiuj wynik do swojego arkusza stylów.

Jak używać

  1. Dostosuj przesunięcie, rozmycie, rozproszenie i kolor. Zaznacz Wewnętrzny, jeśli chcesz cień wewnątrz elementu.
  2. Skopiuj wygenerowany CSS i wklej go do swojego projektu.

Kluczowe funkcje

  • Interaktywne suwaki do przesunięcia, rozmycia, rozproszenia i koloru z podglądem w czasie rzeczywistym
  • Przełącznik inset do efektów cienia wewnętrznego (wciśnięte przyciski, zagłębione elementy)
  • Kopiowanie CSS jednym kliknięciem — gotowe do wklejenia w dowolny arkusz stylów
  • Podgląd na żywo pokazuje dokładnie, jak cień będzie wyglądał
  • 100% w przeglądarce — żadne dane nie opuszczają urządzenia
  • Współpracuje z Generatorem gradientów CSS dla kompletnego wizualnego tworzenia CSS

Kiedy używać tego narzędzia

  • Dodawanie głębi i efektu uniesienia do kart, przycisków i modali w interfejsie
  • Tworzenie efektów cienia w stylu material design lub neumorfizmu
  • Prototypowanie stylów cienia przed wdrożeniem do kodu
  • Nauka jak parametry właściwości CSS box-shadow wpływają na wygląd
  • Szybkie generowanie CSS bez otwierania narzędzi deweloperskich lub aplikacji do projektowania

Szczegóły techniczne

Wygenerowany CSS jest zgodny ze standardową składnią box-shadow: [inset] offset-x offset-y blur spread color. Wartości przesunięcia mogą być ujemne (cień przesuwa się w lewo lub w górę). Promień rozmycia musi być nieujemny; wyższe wartości dają miększe cienie. Rozproszenie rozszerza (dodatnie) lub zawęża (ujemne) cień względem rozmiaru elementu. Kolor może zawierać przezroczystość alfa dla subtelnych efektów (np. rgba(0,0,0,0.2)). Narzędzie generuje standardowy CSS obsługiwany przez wszystkie nowoczesne przeglądarki bez prefiksów vendor.

Podsumowanie

Generator CSS Box Shadow upraszcza proces tworzenia idealnych cieni za pomocą wizualnego, interaktywnego interfejsu. Uzyskaj gotowy do produkcji CSS w kilka sekund bez metody prób i błędów — wszystko działa prywatnie w Twojej przeglądarce.

Najczęściej zadawane pytania

Co to jest inset?
Inset rysuje cień wewnątrz elementu zamiast na zewnątrz. Przydatne do uzyskania efektu wciśnięcia lub zagłębienia.
Czy moje dane są wysyłane na serwer?
Nie. CSS jest generowany w przeglądarce. Nic nie jest przesyłane.
Czy mogę użyć wielu cieni?
To narzędzie generuje jeden cień. Aby dodać więcej, skopiuj wynik i dopisz kolejne wartości rozdzielone przecinkami w box-shadow.
Czy potrzebuję prefiksów vendor?
Nie. Właściwość box-shadow jest obsługiwana przez wszystkie nowoczesne przeglądarki (Chrome, Firefox, Safari, Edge) bez prefiksów vendor. Tylko bardzo stare przeglądarki (IE8 i starsze) nie obsługują tej właściwości.