Generator cieni ramkowych — wizualne narzędzie do tworzenia cieni ramkowych CSS

Dostosuj suwaki, aby utworzyć cień rzucany lub cień wewnętrzny w polu podglądu, a następnie skopiuj wygenerowany kod CSS dla właściwości `box-shadow`. Kontroluj przesunięcie w poziomie i w pionie, promień rozmycia, promień rozprzestrzeniania się, kolor i krycie — nie musisz pamiętać kolejności argumentów ani ręcznie konwertować kolorów na format rgba().

Czym jest to narzędzie?

box-shadow to właściwość CSS, która rysuje cień za (lub wewnątrz) elementem. Wpisana ręcznie może przyjmować do pięciu wartości w następującej kolejności: przesunięcie poziome, przesunięcie pionowe, promień rozmycia, promień rozprzestrzeniania oraz kolor — a także opcjonalne słowo kluczowe „inset”. Łatwo jest je pomylić lub uzyskać zbyt subtelny lub zbyt intensywny efekt przy pierwszej próbie.

To narzędzie pozwala na bezpośrednią edycję: przeciągnij suwak, obserwuj, jak zmienia się cień w oknie podglądu na żywo, a gdy efekt będzie zadowalający, skopiuj dokładny kod CSS. Selektor kolorów w połączeniu z suwakiem krycia automatycznie generuje odpowiednią wartość rgba(), ponieważ przezroczyste cienie zazwyczaj wyglądają lepiej niż całkowicie nieprzezroczyste.

Dlaczego warto go używać?

Podgląd na żywo aktualizuje się natychmiast po zmianie ustawień dowolnego elementu sterującego — możesz sprawdzić dokładny efekt cienia, zanim zatwierdzisz kod.
Pełna kontrola nad przesunięciem w osi X, przesunięciem w osi Y, rozmyciem, rozrzutem, kolorem i kryciem – wszystko w jednym miejscu.
Jedno kliknięcie dodaje wgłębienie, nadające elementowi wygląd wciśniętego lub zagłębionego, zamiast unoszącego się cienia.
Generuje kod CSS gotowy do wklejenia, w którym kolor został już przekonwertowany na format rgba() z wybraną przez użytkownika wartością krycia.
Działa całkowicie w przeglądarce — żadne wprowadzone przez Ciebie ustawienia nie są nigdzie przesyłane.
Bezpłatne, bez rejestracji, działa na urządzeniach mobilnych.

Jak używać

Ustaw wartości offset-x i offset-y, aby ustawić położenie cienia — wartości dodatnie przesuwają go w prawo/w dół, a wartości ujemne — w lewo/w górę.
Zwiększ promień rozmycia, aby zmiękczyć krawędzie cienia; zwiększ rozrzut, aby cień był większy niż sam element.
Wybierz kolor i dostosuj krycie — w przypadku najbardziej realistycznych cieni stosuje się krycie na poziomie 15–40%, a nie czystą czerń.
Zaznacz opcję „inset”, jeśli chcesz, aby cień pojawiał się wewnątrz obramowania elementu, a nie za nim.
Skopiuj wygenerowany kod CSS i wklej go do swojego arkusza stylów.

Przykład

Wejście

Offset: 0px, 10px · Blur: 20px · Spread: 0px · Color: black at 35% opacity

Wynik

box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.35);

Delikatny cień bezpośrednio pod elementem, bez przesunięcia w poziomie — jeden z najczęściej spotykanych stylów cieniowania kart i przycisków.

Pojedynczy cień a cienie warstwowe

To narzędzie tworzy pojedynczą warstwę cienia, co wystarcza w zdecydowanej większości rzeczywistych zastosowań — przyciski, karty, okna modalne i menu rozwijane prawie zawsze wykorzystują jeden cień. CSS obsługuje wprawdzie wiele cieni oddzielonych przecinkami na tym samym elemencie, co pozwala uzyskać bardziej rozbudowane efekty głębi (np. ciasny, ciemny cień nałożony pod miękkim, szerokim cieniem), ale jest to udoskonalenie, które można dodać ręcznie: wystarczy wygenerować tutaj jeden cień, a następnie powielić wiersz, dostosować drugi zestaw wartości i połączyć je przecinkiem.

Typowe wzory cienia skrzynkowego

Delikatne uniesienie karty: niewielkie przesunięcie (0–4 piksele), umiarkowane rozmycie (8–16 pikseli), czerń o kryciu 10–20%.
Wysunięte okienko modalne/rozwijane: większe odsunięcie (4–10 pikseli) i rozmycie (20–30 pikseli), krycie 20–35%, aby uzyskać silniejsze wrażenie unoszenia się w powietrzu.
Przycisk wciśnięty/wpuszczony: zaznacz opcję „wpuszczony”, zastosuj niewielkie przesunięcie o charakterze ujemnym oraz umiarkowane rozmycie, tak aby cień sprawiał wrażenie wgłębienia, a nie wypukłości.
Kolorowa poświata: wybierz kolor firmowy zamiast czerni, zwiększ krycie do 40–60% i nieznacznie zwiększ rozprzestrzenianie, aby uzyskać efekt delikatnej poświaty wokół przycisków.
Ostry/wyraźny cień: ustaw wartość rozmycia na 0, a rozprzestrzenianie na 0, aby uzyskać wyraźną, odsuniętą sylwetkę zamiast miękkiego cienia.

Łączenie z zaokrąglonymi narożnikami

Cienie i zaokrąglone rogi są nieustannie stosowane razem — karty, przyciski i okna modalne niemal zawsze łączą oba te elementy. Skorzystaj z generatora promienia zaokrąglenia krawędzi (Border Radius Generator), aby zaokrąglić rogi tego samego elementu, a następnie zastosuj obie wygenerowane deklaracje CSS jednocześnie.

→ Generator promienia krawędzi · Przelicznik jednostek

Najczęściej zadawane pytania

Jaka jest różnica między rozmyciem a rozprzestrzenianiem się?

Promień rozmycia zmiękcza krawędzie cienia — wyższe wartości sprawiają, że cień zanika bardziej stopniowo. Promień rozszerzenia zmienia rozmiar cienia przed rozmyciem — dodatnia wartość rozszerzenia sprawia, że cień jest większy od elementu ze wszystkich stron, a ujemna wartość go zmniejsza. W większości typowych cieni stosuje się rozmycie z promieniem rozszerzenia ustawionym na 0.

Dlaczego do tworzenia cienia należy używać funkcji rgba() zamiast zwykłego kodu szesnastkowego koloru?

Całkowicie nieprzezroczysty cień wygląda surowo i nierealistycznie — prawdziwe cienie są zawsze nieco przezroczyste, dzięki czemu to, co znajduje się za nimi, lekko prześwituje. Funkcja rgba() pozwala bezpośrednio ustawić tę przezroczystość, dlatego to narzędzie zawsze generuje kolor z wartością alfa, a nie jako jednolity kod szesnastkowy.

Jakie jest przeznaczenie słowa kluczowego „inset”?

Bez atrybutu `inset` cień jest rysowany poza obramowaniem elementu, tak jakby element unosił się nad stroną. Z atrybutem `inset` cień jest natomiast rysowany wewnątrz obramowania, co sprawia, że element wygląda na wciśnięty lub cofnięty — rozwiązanie to jest powszechnie stosowane w przypadku stanów aktywnych/wciśniętych przycisków lub pól wprowadzania danych.

Czy mogę nałożyć więcej niż jeden cień na ten sam element?

Tak — właściwość CSS `box-shadow` akceptuje listę elementów oddzielonych przecinkami, a przeglądarki renderują je w podanej kolejności (pierwszy cień znajduje się na wierzchu). Powszechną techniką jest nakładanie na siebie wąskiego, ciemniejszego cienia i szerszego, bardziej rozmytego, co pozwala uzyskać bardziej realistyczną głębię niż w przypadku stosowania każdego z nich osobno.

Czy właściwość `box-shadow` wpływa na układ strony, czy tylko na jej wygląd?

Wpływa wyłącznie na wygląd — właściwość `box-shadow` nigdy nie wpływa na rozmiar elementu ani na położenie otaczających go elementów, nawet przy dużych wartościach rozmycia lub rozprzestrzeniania. Jeśli cień wydaje się być wizualnie przycięty, sprawdź, czy w elemencie nadrzędnym nie jest ustawiona właściwość `overflow: hidden`, zamiast sprawdzać same wartości cienia.

Generator cieni ramki