CSS box-shadow generator

CSS box-shadow generator

Dostosuj przesunięcie poziome i pionowe, promień rozmycia, promień rozprzestrzeniania i kolor, a narzędzie tworzy odpowiadającą deklarację box-shadow podczas pracy. Jest przeznaczone dla typowych przypadków — karty, przycisku, okna modalnego, które musi się unieść ze strony — oraz dla warstwowych cieni utworzonych z kilku cieni nałożonych na siebie, techniki stojącej za miękką, realistyczną głębią używaną w większości nowoczesnych systemów projektowania.

Menu rozwijane Ustawienie predefiniowane oferuje delikatne, średnie i silne podniesienie, każde ze swoją liczbą warstw, przesunięciami i rozmyciem już dostrojonym; wybierz Niestandardowe, aby samodzielnie kontrolować każdą wartość. Opcja Warstwy kontroluje, ile cieni jest ułożonych: każda dodana warstwa zwiększa przesunięcie i rozmycie o jej indeks i zmniejsza jej nieprzezroczystość, zamieniając jeden płaski cień w miękki, przekonujący. Wewnętrzny odwraca cień do wewnątrz dla wciśniętych elementów, nieprzezroczystość kontroluje, jak mocno czyta się kolor, a przełącznik jednostki daje px lub rem. Włącz wariant dla trybu ciemnego, aby uzyskać drugą, silniejszą deklarację opakowaną w blok @media (prefers-color-scheme: dark) — cień potrzebuje wyższej nieprzezroczystości, aby pozostać widocznym na ciemnym tle. Wybierz, czy wynik wyjdzie jako jedna linia, właściwość --box-shadow czy klasa .box-shadow, i dodaj odpowiadającą linię filter: drop-shadow dla elementów, których box-shadow nie może osiągnąć, takich jak ikona SVG czy PNG z przezroczystością.

Każda wartość jest ograniczona do rozsądnego zakresu, a nieznany kolor powraca do czarnego zamiast nieprawidłowego CSS, więc wynik zawsze czystо przylegá do arkusza stylów.

Wszystko działa w Twojej przeglądarce, gdy dostosowujesz kontrolki — żaden kolor ani wygenerowany CSS nigdy się nigdzie nie rozchodzą. Skopiuj wynik, pobierz go jako plik .txt lub wyślij go do innego narzędzia, aby kontynuować pracę.

Częste pytania