Generator cieni CSS (box-shadow)
Działa na Twoim urządzeniu. Nic nie jest wysyłane.Wszystko działa w przeglądarce - nic nie jest nigdzie wysyłane.
Zacznij od
Warstwy
Przesunięcie poziome
Przesunięcie pionowe
Rozmycie
Rozszerzenie
Kolor
Kod
CSS
box-shadow:
0 10px 15px -3px rgb(15 23 42 / 0.1),
0 4px 6px -4px rgb(15 23 42 / 0.1);Tailwind CSS
shadow-[0_10px_15px_-3px_rgb(15_23_42_/_0.1),0_4px_6px_-4px_rgb(15_23_42_/_0.1)]Edytuj istniejący cień
Projektuj cienie CSS z warstwami, inset i miękkimi presetami, oglądaj je na żywo i kopiuj CSS lub klasę Tailwind. Wklej istniejący cień, by go edytować.
Twórz cień na oko, zamiast zgadywać liczby. Zacznij od presetu - miękki, średni, twardy retro, miękki warstwowy, unoszący się, wewnętrzny, neumorficzny lub poświata - a potem dopracuj przesunięcie, rozmycie, rozszerzenie, kolor, krycie i inset każdej warstwy, obserwując podgląd na bieżąco. Cień może mieć do ośmiu warstw - tak powstają najbardziej naturalne cienie. Skopiuj wynik jako CSS lub klasę Tailwind, udostępnij linkiem albo wklej box-shadow ze swojego arkusza stylów, by dalej nad nim pracować.
Najczęstsze pytania
Co robią rozmycie i rozszerzenie?
Rozmycie zmiękcza krawędź cienia: 0 to ostra linia, większe wartości rozmywają go na więcej pikseli. Rozszerzenie powiększa (dodatnie) lub zmniejsza (ujemne) cień przed rozmyciem - małe ujemne rozszerzenie z dużym rozmyciem daje miękkie, schowane cienie typowe dla nowoczesnych interfejsów.
Po co kilka warstw?
Prawdziwy cień jest ciemny i ostry blisko przedmiotu, a dalej jaśniejszy i miększy. Jedna warstwa nie zrobi obu rzeczy; kilka warstw, których przesunięcie i rozmycie się podwajają, jak w presecie „Miękki warstwowy”, wygląda o wiele naturalniej.
Czym jest cień inset?
Cień inset rysuje się wewnątrz pudełka zamiast na zewnątrz, więc wygląda ono na wciśnięte - przydaje się w polach formularzy, wgłębieniach i wciśniętych przyciskach. W jednym cieniu można łączyć warstwy wewnętrzne i zewnętrzne.
Czy box-shadow spowalnia stronę?
Kilka cieni kosztuje niewiele. Bardzo duże rozmycia na wielu elementach albo animowanie samego box-shadow mogą obniżyć płynność na słabszych telefonach; do animacji lepiej zmieniać krycie pseudoelementu, który już ma cień.