Kluczowe punkty
- 01Każdy parametr box-shadow ma własny suwak plus wejście numeryczne do precyzyjnego dostrojenia w pikselach.
- 02Przełącznik inset zmienia się między cieniem upuszczenia a cieniem wewnętrznym dla efektów wciśnięcia lub neumorficznych.
- 03Kolor i przezroczystość są kontrolowane osobno, wyświetlając rgba() dla czytelnego CSS.
- 04Podgląd używa rzeczywistej właściwości CSS na rzeczywistym elemencie — to, co widzisz, to dokładnie to, co renderuje Twój arkusz stylów.
Dlaczego warto używać wizualnego generatora box-shadow
CSS box-shadow przyjmuje do sześciu wartości — przesunięcie poziome, przesunięcie pionowe, promień rozmycia, promień rozrzutu, kolor i opcjonalne słowo kluczowe inset. Wpisywanie ich z pamięci działa w przypadku prostych cieni, ale dla czegoś bardziej wyrafinowanego — ciasnego blasku, głębokich cieni upuszczenia, miękkiej warstwy podniesienia — zgadujesz i przeładowujesz, aż coś będzie wyglądać dobrze.
Generator wizualny zwęża tę pętlę iteracji. Przesuń suwak, zobacz zmianę natychmiast i skopiuj tylko wtedy, gdy jesteś zadowolony. Generator box-shadow Handytool działa całkowicie w Twojej przeglądarce, więc podgląd to rzeczywista właściwość CSS zastosowana do rzeczywistego elementu — brak różnic w renderowaniu między narzędziem a Twoją rzeczywistą stroną.
Jak zaprojektować cień pudełka
- 01
Dostosuj przesunięcia poziome i pionowe
Wartości dodatnie przesuwają cień w prawo i w dół. Wartości ujemne przesuwają go w lewo i w górę. Cień wyśrodkowany (0, 0) tworzy efekt blasku.
- 02
Ustaw promień rozmycia
Wyższe wartości rozmycia tworzą miękksze, bardziej rozproszone cienie. Zerowe rozmycie daje twardy, solidny kontur cienia.
- 03
Dostosuj promień rozrzutu
Dodatni rozrzut powiększa cień przed rozmyciem. Ujemny rozrzut go zmniejsza, co jest przydatne dla ciasnych cieni pod elementami.
- 04
Wybierz kolor i przezroczystość
Użyj selektora kolorów, aby wybrać odcień cienia, a następnie zmniejsz przezroczystość dla subtelności. Wyjście używa rgba() aby zachować wartości czytelne.
- 05
Przełącz inset w razie potrzeby
Inset zmienia się z cienia upuszczenia na cień wewnętrzny — przydatny dla wciśniętych przycisków, zapadniętych pól wejściowych i powierzchni neumorficznych.
- 06
Skopiuj deklarację CSS
Kliknij Kopiuj, aby pobrać pełną wartość box-shadow i wklej ją do swojego arkusza stylów.
Brak przesyłania, brak konta
Generator jest całkowicie po stronie klienta. Twoje wybory kolorów, wartości numeryczne i stany podglądu pozostają w Twojej przeglądarce — nic nie jest wysyłane na serwer. Nie ma konta do utworzenia i bez limitu użycia.
Ponieważ element podglądu używa rzeczywistej właściwości CSS box-shadow, wyjście jest dokładne z definicji — nie ma renderowania canvas ani przybliżenia zrzutu ekranu. Wartości pikseli, które kopiujesz, to wartości pikseli, które przeglądarka stosuje.
FAQ generatora box-shadow
Co robi wartość rozrzutu?
Dodatni rozrzut powiększa cień we wszystkich kierunkach przed zastosowaniem rozmycia; ujemny rozrzut go zmniejsza. Przydatny dla ciasnych, określonych blasków w połączeniu z niskim rozmyciem.
Czy mogę dodać wiele cieni box-shadow?
Ten generator wyświetla jeden cień na raz. Aby je warstwować, skopiuj wartość i oddziel wiele cieni przecinkami w CSS — box-shadow akceptuje listę oddzieloną przecinkami.
Dlaczego mój cień inset jest niewidoczny?
Cienie inset rysują się wewnątrz elementu, więc potrzebują koloru tła lub widocznego wypełnienia, aby się pokazać. Nie pojawią się na przezroczystych lub zerowych elementach.
Czy podgląd jest dokładny do piksela?
Tak — podgląd używa rzeczywistej właściwości CSS box-shadow na rzeczywistym elemencie DOM, więc to, co widzisz, to dokładnie to, co wytworzy Twój arkusz stylów.
Co to jest cień neumorficzny?
Neumorfizm używa dwóch cieni — jednego jasnego i jednego ciemnego — przesunięte w przeciwnych kierunkach, aby element wyglądał podniesiony lub wciśnięty z płaskiej powierzchni. Oba cienie są zazwyczaj inset dla wariantu wciśniętego.