Generator cieni CSS Box

Deklaracja box-shadow składa się z sześciu ruchomych części — przesunięcia X i Y, rozmycia, rozmycia, koloru i opcjonalnego słowa kluczowego inset — a jedynym sposobem na ich prawidłowe wykonanie jest ich zobaczenie. Ten generator umieszcza każdą część na suwaku i renderuje wynik na karcie podglądu podczas przeciągania, więc linia CSS na dole jest zawsze dokładnie tym, na co patrzysz.

Cienie w świecie rzeczywistym rzadko składają się z jednej warstwy. Lista warstw pozwala na ułożenie maksymalnie czterech cieni w jednej deklaracji: wąska ciemna linia dla podkreślenia krawędzi plus szerokie miękkie rozmycie dla uniesienia lub para jasny-ciemny, która definiuje neumorfizm. Wybierz warstwę, aby ją edytować, usuń te, których nie potrzebujesz, a połączone wartości cienia pudełkowego zostaną zaktualizowane na żywo.

Cienie czyta się zupełnie inaczej na ciemnych interfejsach, gdzie czarny cień na prawie czarnej stronie po prostu znika. Przełącznik tła podglądu przełącza tło między jasnym i ciemnym, dzięki czemu możesz sprawdzić oba motywy przed wysyłką. Zaprogramowane strony obejmują warianty, których ludzie faktycznie szukają: miękki cień elewacji, wstawka, przepis na dwuwarstwowy neumorfizm i subtelny cień karty.

Jak każde narzędzie na tej stronie, generator jest bezpłatny i działa całkowicie w przeglądarce: bez przesyłania, bez konta i działa w trybie offline po załadowaniu strony.