Generator box-shadow

Generator box shadow: cienie CSS warstwa po warstwie

Karta z jednym cieniem często wygląda jak naklejona na stronę. Dwie lub trzy warstwy o rosnącym rozmyciu podnoszą ją nad tło. Ten generator box shadow trzyma do sześciu warstw na liście, rysuje każdą zmianę na pudełku podglądu i zapisuje gotową deklarację box-shadow. Zaraz po załadowaniu strony działa ustawienie „Warstwowy”.

Od suwaka do arkusza stylów

1. Kliknij gotowe ustawienie albo zmień wartości pierwszej warstwy suwakiem lub polem liczbowym.
2. „Dodaj warstwę” tworzy nowy cień. Strzałki zmieniają kolejność, przycisk kopiowania duplikuje warstwę, a kosz ją usuwa.
3. Ustaw „Kolor pudełka”, „Kolor strony” i „Promień narożników” tak jak w projekcie, żeby podgląd pokazywał cień na prawdziwym tle.
4. „Kopiuj CSS” bierze całą deklarację, „Kopiuj samą wartość” tylko to, co stoi po dwukropku.

Co trafia do wyniku

Pierwsza warstwa na liście leży na wierzchu, bo CSS czyta listę rozdzieloną przecinkami w tej kolejności. Narzędzie niczego nie sortuje. Zera tracą jednostkę: przesunięcie 0 jest zapisane jako 0, a nie 0px.

Przy kryciu 100 % kolor ma postać szesnastkową małymi literami, na przykład #111827. Poniżej 100 % wynik wygląda tak: rgb(0 0 0 / 15%). Ukryte warstwy nie trafiają do wyniku. Gdy ukryjesz wszystkie, wynikiem jest box-shadow: none;.

Siedem gotowych ustawień

„Miękki” to jeden duży, blady cień pod białą kartą. „Warstwowy” układa pięć warstw z przesunięciem 1, 2, 4, 8 i 16 px. „Ostre przesunięcie” nie ma rozmycia. Dalej są „Wewnętrzny (inset)”, „Poświata” na ciemnym tle oraz dwa warianty neumorfizmu, wypukły i wciśnięty. Każde ustawienie zmienia też kolor pudełka, kolor strony i promień narożników.

Zakresy, których suwaki nie przekroczą

Przesunięcie i rozprzestrzenienie mieszczą się w przedziale od -100 do 100 px, rozmycie od 0 do 200 px, krycie od 0 do 100 %, a promień od 0 do 100 px. Wartości są liczbami całkowitymi. Wpisz 500 w polu rozmycia, a po opuszczeniu pola zmieni się na 200. Warstw może być sześć, a ostatniej warstwy nie da się usunąć.

Kolory i podgląd

Kolor musi mieć postać szesnastkową z 3 lub 6 cyframi. Nazwa, na przykład red, albo wartość hsl() zostaje odrzucona z komunikatem, a pole wraca do ostatniego poprawnego koloru. Pudełko podglądu ma stały bok 150 px, a jego obszar ucina duże cienie na brzegu. Wynik nie zawiera prefiksów, takich jak -webkit-.

Co dzieje się z Twoimi wartościami

Wartości zamienia na CSS JavaScript działający na tej stronie. Kliknięcie przycisku nie wysyła żadnego żądania, co potwierdzi karta Sieć w przeglądarce. Przyciski kopiowania zapisują do schowka. Narzędzie niczego nie zapamiętuje, więc po odświeżeniu wraca ustawienie „Warstwowy”.

Często zadawane pytania (FAQ)