Darmowy generator CSS box-shadow online. Regulacja przesunięcia, rozmycia, rozproszenia, koloru z podglądem na żywo. Kopiowanie kodu. Przetwarzane w przeglądarce.
Naciśnij Ctrl+D, aby dodać tę stronę do zakładek
Generator CSS Box Shadow to darmowe narzędzie online, które wizualnie edytuje właściwość box-shadow.
Tak, możesz dodać wiele cieni, aby uzyskać złożoną głębię i efekty. Każdy cień można dostosować indywidualnie.
Cień inset pojawia się wewnątrz elementu, a nie na zewnątrz. Podczas gdy zwykły box-shadow pojawia się na zewnątrz, dodanie inset tworzy efekt wgłębienia, jakby wciśnięcia.
Prawdziwe cienie nie są czarne; to przyciemniony kolor tła, który ku krawędziom mięknie. Zamiast jednego ciężkiego cienia z 30% czerni nałóż dwie albo trzy bardzo bladе warstwy o różnych promieniach rozmycia — na przykład 1 px tuż przy krawędzi, 8 px za nią i bardzo delikatny 24 px dalej. Załóż, że światło pada z góry: nadaj cieniowi wyłącznie przesunięcie pionowe, a poziome zostaw na zerze.
W statycznym układzie koszt jest pomijalny, ale wszystko się zmienia, gdy tylko dodasz animację. Przejście wartości box-shadow przy najechaniu kursorem zmusza przeglądarkę do przeliczania rozmycia w każdej klatce, co na słabszych urządzeniach wyraźnie się szarpie. Jeśli potrzebujesz cienia rosnącego przy interakcji, animuj zamiast tego przezroczystość albo transform wcześniej narysowanej warstwy cienia — efekt będzie znacznie płynniejszy.