Miękki CSS Box Shadow — gotowy kod
Twórz wizualnie kod CSS typu box-shadow: suwaki do przesunięcia, rozmycia, rozłożenia, koloru z kryciem, trybu wstawiania i do czterech warstw z podglądem na żywo.
Wynik
Ta strona otwiera generator cieni pudełkowych z fabrycznie załadowanym miękkim cieniem: bez przesunięcia w poziomie, 8 pikseli w dół, duże rozmycie 24 pikseli i niskie krycie czerni wynoszące 12%. Karta podglądu renderuje go natychmiast — przesuń dowolny suwak, a linia CSS wyświetli się w czasie rzeczywistym.
Miękkie cienie są podstawą nowoczesnych interfejsów. Duże rozmycie w połączeniu z niskim przezroczystością podnosi kartę z kartki bez rysowania twardego konturu, dlatego większość systemów projektowych utrzymuje cienie elewacji w dokładnie tym zakresie, zamiast gęstych, ciemnych cieni z wczesnych płaskich projektów.
Skopiuj linię cienia prosto do arkusza stylów lub ułóż maksymalnie trzy kolejne warstwy, aby uzyskać bogatszą elewację. Generator działa całkowicie w przeglądarce — nic nie jest nigdzie przesyłane.