Generator CSS Box Shadow

Deklaracja box-shadow ma sześć ruchomych części – przesunięcie X i Y, rozmycie, rozpływ, kolor i opcjonalne słowo kluczowe inset – a jedynym sposobem, by dobrze je ustawić, jest zobaczenie ich. Ten generator umieszcza każdą część na suwaku i odwzorowuje wynik na karcie podglądu podczas przeciągania, więc linia CSS na dole jest zawsze dokładnie tym, na co patrzysz.

Rzeczywiste cienie rzadko są pojedynczą warstwą. Lista warstw pozwala układać do czterech cieni w jednej deklaracji: ciasną ciemną linię dla definicji krawędzi plus szeroką, miękką plamę dla uniesienia albo parę jasny-ciemny, która definiuje neomorfizm. Wybierz warstwę, aby ją edytować, usuń te, których nie potrzebujesz, a połączona wartość box-shadow zaktualizuje się na żywo.

Cienie wyglądają zupełnie inaczej na ciemnych interfejsach, gdzie czarny cień na prawie czarnej stronie po prostu znika. Przełącznik tła podglądu zmienia tło między jasnym a ciemnym, dzięki czemu możesz sprawdzić oba motywy przed opublikowaniem. Strony z gotowymi ustawieniami obejmują warianty, których ludzie rzeczywiście szukają: miękki cień uniesienia, wstawione zagłębienie, przepis na dwuwarstwowy neomorfizm i subtelny cień karty.

Jak każde narzędzie na tej stronie, generator jest darmowy i działa w całości w Twojej przeglądarce: żadnego przesyłania danych, żadnego konta, a po załadowaniu strony działa również offline.