Opis
To narzędzie tworzy wartości box-shadow, które można wkleić do CSS bez ręcznego składania wszystkich parametrów. Masz pełną kontrolę nad przesunięciem poziomym i pionowym, promieniem rozmycia, rozciągnięciem, kolorem cienia, przezroczystością oraz trybem inset, dzięki czemu efekt pasuje do konkretnego elementu. Sprawdza się wtedy, gdy cień ma wyglądać świadomie, a nie przypadkowo. Wynik możesz zastosować na kartach, menu, oknach dialogowych, przypiętych belkach, polach formularzy i kontenerach obrazów, a podgląd ułatwia porównanie subtelnych i mocniejszych wersji przed wdrożeniem.
Zastosowania
- Głębia kart produktowychUtwórz miękki cień dla kart katalogu, aby każdy kafel wyraźnie oddzielał się od tła.
- Stan wciśnięcia przyciskuWygeneruj ciaśniejszy cień z mniejszym rozmyciem i ujemnym rozciągnięciem, aby przycisk wyglądał na naciskany.
- Wewnętrzne cienie dla pól formularzaZbuduj inset dla inputów, wyszukiwarek i paneli, gdy potrzebny jest wklęsły efekt.
- Unoszony panel dla dropdownówDopasuj większe rozmycie i umiarkowane przesunięcie dla podpowiedzi, list i pływających menu.
Jak to dziala
- 1
Ustaw poziome i pionowe przesunięcie, aby umieścić cień we właściwym miejscu.
- 2
Dopasuj rozmycie i rozciągnięcie, by nadać cieniowi miękkość i zasięg.
- 3
Wybierz kolor cienia oraz przezroczystość zgodną z tłem i powierzchnią.
- 4
Włącz inset, jeśli potrzebujesz cienia wewnątrz elementu.
- 5
Skopiuj wygenerowany kod CSS i zastosuj go w wybranym selektorze.
Przyklady
Miękki cień neutralny
Wejscie: x: 0, y: 10px, blur: 30px, spread: -8px, color: rgba(15, 23, 42, 0.14)
Wynik: box-shadow: 0 10px 30px -8px rgba(15, 23, 42, 0.14);
Delikatny cień do jasnych kart na lekkim tle.
Inset dla zagłębionego pola
Wejscie: x: 0, y: 2px, blur: 6px, spread: 0, color: rgba(0, 0, 0, 0.18), inset: true
Wynik: box-shadow: inset 0 2px 6px 0 rgba(0, 0, 0, 0.18);
Efekt wgłębienia dla pola tekstowego lub sekcji.
Kompaktowy cień hover
Wejscie: x: 0, y: 6px, blur: 16px, spread: -4px, color: rgba(37, 99, 235, 0.22)
Wynik: box-shadow: 0 6px 16px -4px rgba(37, 99, 235, 0.22);
Barwiony cień do kafelków akcji po najechaniu.
FAQ
Co zmienia wartość spread w cieniu?
Spread zmienia rozmiar cienia przed dodaniem rozmycia. Wartości ujemne go zmniejszają, dodatnie zwiększają zasięg.
Dlaczego cień na ciemnym tle wygląda zbyt ostro?
Najczęściej kolor ma zbyt wysoką przezroczystość lub rozmycie jest za małe. Zmniejsz krycie i zwiększ blur, żeby krawędź była łagodniejsza.
Kiedy używać inset zamiast zwykłego cienia?
Inset wybierz wtedy, gdy powierzchnia ma wyglądać na wciśniętą, na przykład w polach formularzy, zagłębionych panelach lub sekcjach pomocniczych.
Czy można tu zbudować kilka warstw cienia?
To narzędzie generuje jedną regułę naraz. Jeśli potrzebujesz kilku warstw, połącz osobne wartości box-shadow ręcznie w CSS.
Dlaczego przy dużym ujemnym spread cień znika?
Duże ujemne rozciągnięcie może zbyt mocno skurczyć cień, zwłaszcza przy małym blur. Zmniejsz wartość ujemną albo zwiększ rozmycie.