Jak utworzyć cień CSS box-shadow i skopiować kod?

Dostosuj suwaki przesunięcia X i Y, rozmycia, rozproszenia, Koloru i krycia, obserwując podgląd na żywo. Następnie naciśnij Kopiuj w sekcji kodu CSS. Możesz też zacząć od Szablonów, takich jak Miękki, Poświata czy Material 8.

Czy mogę nałożyć kilka cieni na jeden element?

Tak. Naciśnij + Dodaj kolejną warstwę cienia, aby dodać więcej warstw, a następnie zmieniaj ich kolejność, Ukryj lub Usuń każdą z nich. Warstwy są łączone przecinkami w jednej wartości box-shadow.

Jak zrobić cień wewnętrzny?

Wybierz warstwę i włącz Cień wewnętrzny lub załaduj szablon Wewnętrzny. Kod wynikowy będzie wtedy zawierał słowo kluczowe inset dla tej warstwy.

Czy mogę uzyskać klasę Tailwind zamiast zwykłego CSS?

Tak. Oprócz deklaracji CSS narzędzie generuje klasę Tailwind o dowolnej wartości w postaci shadow-[...], ze spacjami zastąpionymi podkreśleniami, gotową do wklejenia w kod znaczników.

Czy jest łatwiejszy sposób na ustawienie pozycji cienia niż suwaki?

Tak. Przeciągnij pole podglądu, aby przesunąć cień aktywnej warstwy, i przytrzymaj Shift, aby uzyskać precyzyjną kontrolę. Możesz także zmienić Tło podglądu i Kolor pola, aby zobaczyć, jak cień wygląda na Twoim projekcie.

Czy naprawdę jest za darmo?

Tak. Każde narzędzie jest darmowe, bez konta i karty kredytowej. Praca odbywa się na Twoim urządzeniu, a nie na naszych serwerach, co pozwala utrzymać ją za darmo.

Czy działa na urządzeniach mobilnych?

Tak. Działa w aktualnych przeglądarkach mobilnych na iOS i Androidzie, bez instalowania czegokolwiek.

🎨

Generator cienia CSS za darmo

Wizualny kreator CSS box-shadow z podglądem na żywo, wielowarstwowym układaniem, selektorem kolorów, przełącznikiem wewnętrznym i kopiowaniem jednym kliknięciem. Zawiera ustawienia wstępne Material, neumorfizm i poświata.

Działa w przeglądarceBez rejestracji, bez wyskakujących okienekLogowanie nie jest wymaganeZa darmo na zawsze

Działa offline po wczytaniu

Tło podglądu

Przeciągnij pole, aby umieścić cień aktywnej warstwy — przytrzymaj Shift w celu dokładnej kontroli

box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.15);

Szablony

Kolor pola

Zaokrąglenie narożników (16px)

x (0px)

y (4px)

rozmycie (12px)

rozciągnięcie (0px)

Kolor

Przezroczystość (15%)

Cień wewnętrzny

Typowe zastosowania

Cienie UI KartyZbuduj eleganckie cienie kart dla pulpitów, siatek produktów i pulpitów.
Efekty Naciśnięcia PrzyciskuZbuduj cienie przycisków, które naśladują głębię świata rzeczywistego i stany naciśnięcia.
Neumorphism Soft UIUtwórz wygląd soft-UI neumorphism z sparowanymi cieniami jasne + ciemne.
Cienie Modal i PopoverUtwórz podniesiony, unoszący się wygląd dla dialogów i menu rozwijanych.
Efekty Świecenia i Pierścienia FokusaTwórz świecące efekty akcentujące, pierścienie fokusa i podświetlenia w stylu neonowym.

Jak to działa

Generator box-shadow to narzędzie React działające w całości po stronie klienta — bez serwera i biblioteki. Przechowuje w stanie listę obiektów warstw cienia, przy każdej zmianie składa poprawne ciągi CSS box-shadow z użyciem ręcznie napisanego formatera rgba() i stosuje je bezpośrednio do elementu podglądu przez właściwość style Reacta, więc silnik renderujący przeglądarki natychmiast rysuje wynik.

1
Parametry warstw zasilają formater
Każda warstwa cienia przechowuje przesunięcia x/y, rozmycie, rozciągnięcie, kolor hex i krycie. Przy każdej zmianie mała funkcja shadowToCss zamienia kolor hex na składowe RGB wyrażeniem regularnym, a następnie składa ciąg rgba() — na przykład 0px 4px 12px 0px rgba(0, 0, 0, 0.15). Wiele warstw łączy się przecinkami.
2
Przeglądarka renderuje podgląd na żywo
Złożony ciąg jest przypisywany do właściwości stylu boxShadow elementu div bezpośrednio w JSX. React aktualizuje atrybut DOM, a silnik CSS przeglądarki od razu maluje cień — bez canvas czy WebGL, tylko natywne renderowanie CSS.
3
Przeciąganie korzysta z Pointer Events API
Kliknięcie i przeciągnięcie pola podglądu wywołuje setPointerCapture na elemencie, a następnie śledzi zmiany z onPointerMove, aby na bieżąco aktualizować przesunięcia x i y aktywnej warstwy. Przytrzymanie Shift stosuje współczynnik 0,25x dla precyzyjnego ustawiania.
4
Wynik jest kopiowany do schowka
Narzędzie tworzy z tych samych danych warstw dwa formaty wyjściowe: standardową deklarację CSS box-shadow oraz klasę Tailwind z dowolną wartością (shadow-[...]), w której spacje są zastępowane podkreśleniami zgodnie ze składnią Tailwind. Kopiowanie jednym kliknięciem używa navigator.clipboard.writeText.