Generator cieni elementów
Generowanie właściwości CSS box-shadow
Warstwy cienia
Cień 1
Gotowe cienie
Wskazówki dotyczące cieni
Dodatnie wartości przesunięcia przesuwają cienie w dół i w prawo, a ujemne w górę i w lewo.
Promień rozmycia określa miękkość cienia; wyższe wartości dają bardziej rozproszone cienie.
Promień rozszerzenia powiększa lub zmniejsza rozmiar cienia.
Cienie wewnętrzne tworzą efekt głębi.
Wiele cieni można nakładać na siebie, aby uzyskać złożone efekty oświetlenia.
Niższe wartości krycia dają bardziej subtelne, realistyczne cienie.
Podgląd na żywo
Skala podglądu: 100%
Deklaracja CSS
box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.1);Klasa CSS
.shadow {
box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.1);
}Tailwind CSS (przybliżony)
shadowTo tylko sugestia stylu. Własne przesunięcia, kolory, cień wewnętrzny i wiele warstw wymagają wygenerowanego kodu CSS.
Zmień warstwę lub wypróbuj gotowy cień. Podgląd aktualizuje się na bieżąco.
O generatorze cieni elementów
Nasz darmowy generator cieni CSS box-shadow pozwala tworzyć profesjonalne efekty cieni z pełną kontrolą wizualną. Przesunięcie, promień rozmycia, promień rozszerzenia, kolor i krycie ustawisz intuicyjnymi suwakami, a wynik zmienia się na podglądzie w czasie rzeczywistym. Nakładaj kilka cieni na siebie, aby uzyskać złożone efekty głębi, dzięki którym elementy interfejsu wyraźnie się wyróżniają.
Cienie są niezbędne do budowania hierarchii wizualnej i głębi we współczesnych interfejsach internetowych. Dobrze dobrany box-shadow sprawia, że karty zdają się unosić nad stroną, przyciski wydają się interaktywne, a elementy nawigacji wyraźnie odcinają się od tła. To narzędzie oszczędza prób i błędów przy ręcznym pisaniu wartości box-shadow.
Generator obsługuje cienie zewnętrzne i wewnętrzne (inset), wiele warstw cienia oraz zawiera 6 gotowych szablonów popularnych stylów cieni. Wynik jest podawany jako kod CSS z przyciskiem kopiowania jednym kliknięciem, wraz z przybliżonymi propozycjami klas użytkowych Tailwind CSS. Całe przetwarzanie odbywa się w Twojej przeglądarce, a żadne dane nie trafiają na serwer.
Najważniejsze funkcje
- Wiele warstw cienia, które można dodawać, usuwać i konfigurować osobno
- Precyzyjne suwaki przesunięcia X, przesunięcia Y, promienia rozmycia i promienia rozszerzenia
- Próbnik kolorów z polem HEX i regulowanym kryciem dla każdej warstwy cienia
- Przełącznik cienia wewnętrznego (inset) do uzyskiwania efektu głębi wewnętrznej i wytłoczenia
- 6 gotowych szablonów cieni: delikatny, średni, duży, bardzo duży, wewnętrzny i wielowarstwowy
- Generator losowych cieni do odkrywania kreatywnych kombinacji
- Podgląd na żywo w czasie rzeczywistym z regulowanym kolorem elementu
- Kopiowanie do schowka jednym kliknięciem z czystym kodem CSS
- Alternatywne formaty wyniku, w tym klasa CSS i przybliżona klasa użytkowa Tailwind CSS
- Pełna obsługa trybu ciemnego dla wygodnej edycji w każdych warunkach oświetleniowych
Jak korzystać z generatora cieni elementów
- Dodaj warstwy cienia: Zacznij od domyślnego cienia lub kliknij Dodaj, aby utworzyć kolejne warstwy dla złożonych efektów.
- Dostosuj właściwości cienia: Za pomocą suwaków ustaw przesunięcie X/Y, promień rozmycia, promień rozszerzenia, kolor i krycie każdej warstwy cienia.
- Przełącz cień wewnętrzny: Zaznacz pole Inset w dowolnej warstwie cienia, aby uzyskać efekt cienia wewnętrznego zamiast zewnętrznego.
- Obejrzyj wynik: Na elemencie podglądu zobaczysz dokładnie, jak wygląda Twój cień. W razie potrzeby zmień kolor elementu podglądu.
- Wypróbuj szablony: Kliknij dowolny z 6 gotowych szablonów, aby szybko zastosować popularny styl cienia jako punkt wyjścia.
- Skopiuj CSS: Kliknij przycisk Kopiuj, aby skopiować do schowka kompletną deklarację CSS box-shadow.
Zastosowania
- Wyniesienie kart: Dodaj głębi komponentom kart, aby zdawały się unosić nad tłem strony.
- Stany przycisków po najechaniu: Twórz przejścia cieni dla przycisków, które wizualnie reagują na działania użytkownika.
- Stylizacja okien modalnych i dialogowych: Zastosuj duże, miękkie cienie w oknach modalnych i dialogowych, aby wyraźnie oddzielić je od tła.
- Rozwijane menu nawigacji: Nadaj menu rozwijanym i wyskakującym cienie, które oddają warstwowość i głębię.
- Efekty fokusa pól: Używaj kolorowych cieni jako wskaźników fokusa pól formularzy i elementów interaktywnych.
- Efekty wewnętrzne: Twórz wygląd wciśnięty lub wytłoczony dla przycisków przełączników, stanów aktywnych i elementów dekoracyjnych.
- Neumorfizm: Połącz kilka jasnych i ciemnych cieni, aby uzyskać popularną estetykę miękkiego interfejsu.
- Oprawa obrazów: Dodaj subtelne cienie do obrazów i kontenerów multimediów, aby galeria wyglądała schludnie.
Najczęściej zadawane pytania
Czy to narzędzie jest darmowe?
Tak, generator cieni elementów jest całkowicie darmowy i nie ogranicza liczby tworzonych cieni. Nie jest wymagana rejestracja ani płatność.
Czy moje dane są bezpieczne?
Całe generowanie i podgląd cieni odbywa się wyłącznie w Twojej przeglądarce. Żadne dane nie są wysyłane na zewnętrzny serwer, więc Twoje ustawienia i kod CSS pozostają całkowicie prywatne.
Jaka jest różnica między promieniem rozmycia a promieniem rozszerzenia?
Promień rozmycia określa, jak miękki lub rozproszony jest cień: wyższe wartości dają łagodniejsze przejście. Promień rozszerzenia powiększa (wartości dodatnie) lub zmniejsza (wartości ujemne) rozmiar cienia względem elementu.
Czy mogę użyć kilku cieni na jednym elemencie?
Tak, CSS obsługuje wiele wartości box-shadow oddzielonych przecinkami. To narzędzie pozwala dodać kilka warstw cienia i automatycznie łączy je w jedną deklarację box-shadow.
Czym jest cień wewnętrzny (inset)?
Cień wewnętrzny jest rysowany wewnątrz elementu, a nie na zewnątrz, co daje wrażenie wgłębienia lub wciśnięcia. Najczęściej stosuje się go w polach formularzy, aktywnych stanach przycisków i projektach w stylu neumorfizmu.
Czy box-shadow jest obsługiwany we wszystkich przeglądarkach?
Tak, właściwość box-shadow jest w pełni obsługiwana we wszystkich nowoczesnych przeglądarkach, w tym w Chrome, Firefox, Safari, Edge i Opera. Prefiksy producentów nie są potrzebne.
Wskazówki i dobre praktyki
- Stawiaj na subtelne cienie: Niskie krycie (5-15%) i umiarkowane rozmycie dają realistyczne, profesjonalne cienie, które nie przytłaczają projektu.
- Użyj ujemnego rozszerzenia: Niewielki ujemny promień rozszerzenia sprawia, że cień wygląda na ciaśniejszy i bardziej skupiony pod elementem.
- Nakładaj kilka cieni: Połącz ciasny, ciemny cień z szerszym, jaśniejszym, aby uzyskać naturalną głębię przypominającą rzeczywiste oświetlenie.
- Dopasuj źródło światła: Utrzymuj spójne kierunki przesunięcia w całym projekcie, aby symulować jedno, spójne źródło światła.
- Pamiętaj o wydajności: Duże wartości rozmycia na wielu elementach mogą obniżać wydajność renderowania, zwłaszcza na urządzeniach mobilnych.
- Używaj cieni do budowania hierarchii: Wyższe wyniesienie (większe przesunięcie i rozmycie) powinno oznaczać elementy znajdujące się bliżej użytkownika w stosie wizualnym.