Generator cieni CSS box-shadow
Twórz warstwowe cienie CSS box-shadow z suwakami do przesunięcia, rozmycia, rozrostu, koloru, krycia i wcięcia — podgląd na prawdziwym elemencie i gotowy CSS do skopiowania.
box-shadow: —;
Wszystko aktualizuje się na żywo w Twojej przeglądarce — brak przesyłania, brak rejestracji, całkowicie bezpłatnie.
O Generator cieni CSS box-shadow
Generator cieni box-shadow CSS pozwala projektować cienie wizualnie zamiast zgadywać wartości w kodzie. Przeciągaj suwaki przesunięcia poziomego i pionowego, promienia rozmycia, promienia rozprzestrzenienia, koloru i przezroczystości — z przełącznikiem cienia wewnętrznego — i obserwuj na żywo aktualizowany rzeczywisty element. Gdy wygląda dobrze, skopiuj gotowy do wklejenia CSS jednym kliknięciem.
Nowoczesne cienie interfejsu rzadko są pojedynczą warstwą. Ten generator obsługuje ułożone warstwy cieni: dodawaj, duplikuj, ukrywaj lub usuwaj warstwy oraz podglądaj wybraną warstwę osobno albo wszystkie razem. Nałożenie ciasnego, ciemnego cienia pod miękkim, szerokim to sposób, w jaki dopracowane karty i przyciski zyskują głębię.
Możesz też stylizować sam podglądany element — kolor pudełka, promień obramowania i tło płótna — dzięki czemu cień jest oceniany w realistycznym kontekście, w tym na ciemnych powierzchniach. Zacznij od gotowego ustawienia, kliknij „Losuj warstwę” po inspirację i resetuj, kiedy chcesz czystego startu. Wszystko działa w Twojej przeglądarce.
Jak korzystać z Generator cieni CSS box-shadow
- Dostosuj suwaki przesunięcia poziomego, przesunięcia pionowego, rozmycia, rozprzestrzenienia, koloru i przezroczystości oraz włącz „Cień wewnętrzny”, jeśli chcesz cień wewnątrz elementu.
- Kliknij „Dodaj warstwę” lub „Duplikuj warstwę”, aby ułożyć cienie, i przełączaj tryb podglądu między „Ta warstwa” a „Wszystkie warstwy”, aby dopracować każdą z nich.
- Dostosuj element i płótno — kolor pudełka, promień obramowania i tło — tak aby podgląd odpowiadał Twojemu rzeczywistemu projektowi.
- Zastosuj gotowe ustawienie lub użyj „Losuj warstwę”, jeśli chcesz punktu wyjścia zamiast pustego zestawu suwaków.
- Skopiuj pełną regułę CSS (lub samą wartość) i wklej ją do swojego arkusza stylów.