Zbuduj cień. Zobacz go od razu na karcie.
Build a shadow. See it on a card instantly.
Ustaw przesunięcie, rozmycie, rozpiętość i kolor, dodaj kilka warstw naraz i skopiuj gotową
wartość box-shadow. Bez instalacji, bez rejestracji — wszystko w przeglądarce.
Set the offset, blur, spread and color, stack several layers at once, and copy the finished
box-shadow value. No install, no sign-up — it all runs in your browser.
box-shadow: 10px 14px 28px -4px rgba(26,32,48,.18);
Ustaw parametry
Adjust the values
Przesuwaj suwaki przesunięcia, rozmycia, rozpiętości i przezroczystości, aż podgląd będzie pasował do projektu.
Move the offset, blur, spread, and opacity sliders until the preview matches your design.
Dodaj warstwy
Add layers
Nałóż kilka cieni na siebie, żeby uzyskać miękkie karty, unoszące się panele albo efekt neumorficzny.
Stack multiple shadows to create soft cards, floating panels, or a neumorphic surface.
Skopiuj CSS
Copy the CSS
Kliknij „Kopiuj” i wklej gotową wartość box-shadow do swojego arkusza stylów.
Click "Copy" and paste the ready box-shadow value into your stylesheet.
- Cienie kart na stronach lądowania i w dashboardach.
- Efekty hover dla przycisków, menu i modali.
- Reużywalne tokeny elewacji w systemie designu.
- Card shadows for landing pages and dashboards.
- Hover effects for buttons, menus, and modals.
- Reusable elevation tokens for a design system.
Czym jest ten generator? To wizualne narzędzie do budowania
wartości CSS box-shadow bez zgadywania liczb — widzisz efekt, zanim skopiujesz kod.
What is this tool? A visual way to build a CSS
box-shadow value without guessing numbers — you see the effect before you copy the code.
Co robi box-shadow w CSS?
What does box-shadow do in CSS?
Właściwość box-shadow rysuje jeden lub więcej cieni wokół elementu.
Każda warstwa może mieć własne przesunięcie poziome i pionowe, rozmycie, rozpiętość, kolor i tryb inset.
The box-shadow property draws one or more shadows around an element.
Each layer can define its own horizontal and vertical offset, blur, spread, color, and inset behavior.
Czy mogę stworzyć kilka cieni naraz?
Can I create multiple shadows at once?
Tak. Kliknij „Dodaj warstwę”, żeby dołączyć bieżące ustawienia do listy. Generator łączy warstwy przecinkami, co jest standardową składnią CSS dla wielu cieni.
Yes. Click "Add layer" to append the current settings to the list. The generator joins layers with commas, which is the standard CSS syntax for layered shadows.
Czym różni się inset od zwykłego cienia?
How is inset different from a regular shadow?
Zwykły cień pada na zewnątrz elementu, a inset przenosi go do środka, co dobrze sprawdza się przy wciśniętych przyciskach, polach formularza i lekko wgłębionych panelach.
A regular shadow falls outside the element, while inset moves it inside, which works well for pressed buttons, form fields, and subtly recessed panels.
Czy powinienem używać dużych cieni wszędzie?
Should I use large shadows everywhere?
Lepiej używać dużych cieni wybiórczo. Subtelne wartości zwykle wyglądają czyściej, a mocniejsze cienie sprawdzają się przy nakładkach, oknach dialogowych i wyróżnionych elementach.
Use large shadows selectively. Subtle values usually feel cleaner, while heavy shadows work better for overlays, dialogs, and highlighted elements.
Czy narzędzie wysyła moje dane gdziekolwiek?
Does the tool upload my data anywhere?
Nie. Generator działa w całości w Twojej przeglądarce — ustawienia i skopiowany CSS zostają lokalnie.
No. The generator runs entirely in your browser — your settings and copied CSS stay local.
Czym jest CSS Box Shadow Generator?
Cienie CSS to jeden z najszybszych sposobów, żeby nadać interfejsowi głębię. Płaska karta zaczyna wyglądać jak klikalna dzięki subtelnemu cieniowi, modal wydaje się bliżej użytkownika przy mocniejszym cieniu, a menu nawigacyjne odcina się od strony wąskim cieniem u dołu. Te detale wpływają na to, jak użytkownik odczytuje hierarchię — cień nie jest więc czystą dekoracją, tylko komunikatem, co jest interaktywne, uniesione albo pogrupowane.
Jak działają wartości box-shadow
Najczęstsza składnia korzysta z przesunięcia poziomego, pionowego, rozmycia, rozpiętości i koloru. Dodatnie przesunięcie poziome przesuwa cień w prawo, ujemne w lewo. Dodatnie przesunięcie pionowe przesuwa cień w dół, ujemne w górę. Rozmycie kontroluje miękkość krawędzi, a rozpiętość rozszerza lub zwęża cień jeszcze przed zastosowaniem rozmycia. Kolor zwykle zawiera przezroczystość, bo realistyczne cienie rzadko są w pełni kryjące.
Dlaczego warstwowe cienie wyglądają lepiej
Wiele nowoczesnych interfejsów korzysta z więcej niż jednego cienia naraz. Zamiast jednego ostrego cienia projektanci często nakładają dwie lub trzy delikatniejsze warstwy: mała, bliska warstwa daje efekt kontaktu z powierzchnią, a większa, rozmyta warstwa tworzy iluzję wysokości.
Praktyczne wskazówki
- Używaj niskiej przezroczystości (10–30%) dla większości cieni interfejsu.
- Trzymaj rozmycie większe niż przesunięcie dla miękkiego, uniesionego efektu karty.
- Ujemna rozpiętość zapobiega temu, żeby cień wyglądał zbyt grubo wokół całej krawędzi.
- Dopasuj kolor cienia do motywu strony — ciemny granat często wygląda lepiej niż czysta czerń.
Wdrożenie w produkcji
Po skopiowaniu CSS możesz wkleić go do klasy, komponentu albo zmiennej niestandardowej. W
systemach designu warto zapisać cienie jako tokeny elewacji, np. --shadow-sm,
--shadow-md, --shadow-xl, żeby zachować spójną głębię wizualną między
kartami, przyciskami i menu rozwijanymi.
What is a CSS Box Shadow Generator?
Box shadows are one of the fastest ways to give an interface depth. A flat card starts to feel clickable with a subtle shadow, a modal feels closer to the user with a stronger one, and a navigation menu separates from the page with a narrow shadow underneath. These details shape how a user reads hierarchy, so a shadow isn't just decoration — it signals what's interactive, elevated, or grouped together.
How box-shadow values work
The most common syntax uses horizontal offset, vertical offset, blur radius, spread radius, and color. A positive horizontal offset moves the shadow right, a negative one moves it left. A positive vertical offset moves it down, a negative one moves it up. Blur controls softness, and spread expands or contracts the shadow before blur is applied. The color usually carries transparency, since realistic shadows are rarely fully opaque.
Why layered shadows look better
Many modern interfaces use more than one shadow layer. Instead of one harsh shadow, designers often stack two or three softer ones: a small, close shadow adds contact with the surface, while a larger, blurred one creates the illusion of height.
Practical tips
- Use low opacity (10–30%) for most interface shadows.
- Keep blur larger than the offset for a soft, elevated card feel.
- Negative spread keeps a shadow from looking too thick around every edge.
- Match the shadow color to the page theme — dark navy often reads better than pure black.
Using it in production
After copying the CSS, paste it into a class, a component, or a custom property. For design
systems, consider saving shadows as elevation tokens such as --shadow-sm,
--shadow-md, and --shadow-xl to keep visual depth consistent across
cards, buttons, and dropdown menus.
Sprawdź też inne generatory CSS.
Check out the other CSS generators too.
Gradienty, zaokrąglenia, przyciski i efekty szkła — wszystko w jednym miejscu, bez instalacji.
Gradients, border radius, buttons, and glass effects — all in one place, no install needed.