Jak korzystać: Generator box-shadow
- 1
Wybierz cień na start
Kliknij gotowy wzór, np. Miękki, Warstwowy lub Wysokość 2, albo zmień domyślną warstwę.
- 2
Dopracuj każdą warstwę
Zaznacz warstwę i ustaw jej przesunięcie X i Y, rozmycie, rozszerzenie, kolor, krycie oraz tryb wewnętrzny.
- 3
Sprawdź na swojej powierzchni
Zmień rozmiar pola, promień rogów i kolory, aby pasowały do stylizowanego elementu.
- 4
Skopiuj CSS
Skopiuj deklarację box-shadow lub klasę Tailwind do swojego kodu.
Limity i Pro
Za darmo i bez rejestracji: dowolna liczba warstw, przesunięcia od −100 do 100 px, rozmycie do 200 px i 12 gotowych wzorów cienia.
Pro usuwa reklamy; edytor cieni jest kompletny w każdym planie. Zobacz Pro
O narzędziu: Generator box-shadow
Właściwość CSS box-shadow przyjmuje listę warstw. Każda ma przesunięcie w poziomie i w pionie, promień rozmycia, rozszerzenie, kolor oraz opcjonalne słowo kluczowe inset. Naturalnie wyglądająca głębia wymaga wyważenia tych wszystkich wartości w dwóch lub więcej warstwach, a trudno to zrobić, poprawiając liczby w arkuszu stylów. Ten edytor pokazuje efekt na podglądzie na żywo, gdy przeciągasz suwaki, a deklarację oraz klasę Tailwind shadow-[…] zapisuje za Ciebie.
Dodaj tyle warstw, ile chcesz, ukryj jedną na chwilę, żeby porównać efekt, przesuń ją w górę lub w dół (pierwsza warstwa na liście jest rysowana na wierzchu) albo przełącz ją na Wewnętrzny, np. do wciśniętych przycisków i pól formularzy. Przesunięcia mieszczą się w zakresie od −100 do 100 pikseli, rozmycie sięga 200 pikseli, a rozszerzenie wynosi od −100 do 100. Każdy kolor ma własne krycie. Ujemne rozszerzenie to sposób na nowoczesne, miękkie cienie: podciąga cień pod element, więc pod spodem widać tylko delikatną poświatę.
Pole podglądu możesz zmienić pod względem rozmiaru, promienia rogów, koloru pola i koloru tła, dzięki czemu ocenisz cień na rzeczywistej powierzchni swojego projektu, także w ciemnych motywach, gdzie cienie wymagają większego krycia albo kolorowej poświaty.
W zestawie jest dwanaście punktów wyjścia: cztery poziomy wysokości z Material Design, miękki cień jednowarstwowy, gładki cień z pięciu warstw, twarde przesunięcie w stylu neobrutalizmu, neumorfizm, cień wewnętrzny, kolorowa poświata, obrys w stylu fokusa i unosząca się karta. Gradienty znajdziesz w drugiej zakładce. Cienie tekstu i filtr drop-shadow() nie są obsługiwane.
Prywatność
Cień powstaje i jest podglądany w całości na tej stronie, a Twoje warstwy zapisują się tylko w pamięci lokalnej tej przeglądarki, żeby przetrwały odświeżenie. Żadne ustawienia ani projekty nie są wysyłane na serwer.