Jak vytvořím CSS box-shadow a zkopíruji kód?

Nastavte posuvníky pro posun x a y, rozostření, rozšíření, Barvu a průhlednost a sledujte živý náhled. Poté stiskněte Kopírovat ve výstupu CSS. Můžete také začít z Předvoleb, jako je Jemný, Záře nebo Material 8.

Mohu na jeden prvek naskládat více stínů?

Ano. Stiskněte + Přidat další vrstvu stínu pro přidání dalších vrstev, poté je můžete přeuspořádat, Skrýt nebo Odebrat. Vrstvy jsou ve výsledné hodnotě box-shadow spojeny čárkami.

Jak vytvořím vnitřní stín?

Vyberte vrstvu a zapněte Vnitřní stín, nebo načtěte předvolbu Vnitřní. Výstup pak pro tuto vrstvu obsahuje klíčové slovo inset.

Mohu získat třídu Tailwind namísto čistého CSS?

Ano. Kromě CSS deklarace nástroj vygeneruje i libovolnou hodnotu třídy Tailwind ve tvaru shadow-[...], kde jsou mezery nahrazeny podtržítky, připravenou k vložení do vašeho kódu.

Existuje jednodušší způsob nastavení pozice stínu než pomocí posuvníků?

Ano. Přetáhněte pole náhledu pro posun stínu aktivní vrstvy a podržte Shift pro jemné ovládání. Můžete také změnit Náhled pozadí a Barvu rámečku, abyste viděli, jak stín vypadá na vašem designu.

Je to opravdu zdarma?

Ano. Každý nástroj je zdarma, bez účtu a bez platební karty. Práce probíhá na vašem zařízení, nikoli na našich serverech, což umožňuje jeho bezplatné používání.

Funguje to na mobilu?

Ano. Funguje v aktuálních mobilních prohlížečích na iOS a Androidu a nic se neinstaluje.

🎨

Generátor CSS stínu rámečku zdarma

Vizuální nástroj pro CSS box-shadow s živým náhledem, vícevrstvým skládáním, výběrem barev, přepínačem vnitřního stínu a kopírováním jedním kliknutím. Zahrnuje přednastavení Material, neumorphism a záři.

Běží ve vašem prohlížečiBez registrace, bez vyskakovacích okenNení nutné přihlášeníZdarma navždy

Funguje offline po načtení

Náhled pozadí

Přetáhněte box a umístěte stín aktivní vrstvy — držte Shift pro jemné nastavení

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

Předvolby

Barva rámečku

Poloměr rohů (16px)

x (0px)

y (4px)

rozostření (12px)

rozptyl (0px)

Barva

Průhlednost (15%)

Vnitřní stín

Běžná použití

Kartové stíny uživatelského rozhraníVytvořte elegantní stíny karet pro palubní desky, mřížky produktů a palubní desky.
Efekty stisknutí tlačítkaVytvořte stíny tlačítek, které napodobují hloubku a stavy tisku v reálném světě.
Neumorphism měkké uživatelské rozhraníVytvořte vzhled měkkého uživatelského rozhraní neumorphism s párovými světlými + tmavými stíny.
Modální a Popover stínyVytvořte zdvižený, plovoucí pocit pro dialogy a rozevírací seznamy.
Efekty záře a kruh zaostřeníVytvořte efekty zářivého důrazu, kruh zaostření a efekty ve stylu neonů.

Jak to funguje

Generátor box-shadow je plně klientský nástroj React — bez serveru, bez knihovny. Udržuje seznam objektů vrstev stínu ve stavu, při každé změně sestavuje platné řetězce CSS box-shadow pomocí ručně napsaného formátovače rgba() a aplikuje je přímo na prvek náhledu přes vlastnost style Reactu, takže vlastní vykreslovací engine prohlížeče výsledek okamžitě nakreslí.

1
Parametry vrstvy napájejí formátovač
Každá vrstva stínu ukládá posuny x/y, rozostření, roztažení, hex barvu a hodnotu neprůhlednosti. Při každé změně malá funkce shadowToCss převede hex barvu na komponenty RGB pomocí regulárního výrazu a poté sestaví řetězec rgba() — například 0px 4px 12px 0px rgba(0, 0, 0, 0.15). Více vrstev se spojuje čárkami.
2
Prohlížeč vykresluje živý náhled
Sestavený řetězec se přiřadí vlastnosti stylu boxShadow prvku div přímo v JSX. React aktualizuje atribut DOM a CSS engine prohlížeče stín okamžitě vykreslí — nepoužívá se plátno ani WebGL, jen nativní vykreslování CSS.
3
Přetahování na pozici využívá Pointer Events API
Kliknutí a přetažení náhledového boxu volá setPointerCapture na prvku a poté sleduje delty onPointerMove pro aktualizaci posunů x a y aktivní vrstvy v reálném čase. Podržení Shift aplikuje faktor měřítka 0,25x pro jemné polohování.
4
Výstup se kopíruje do schránky
Nástroj generuje dva výstupní formáty ze stejných dat vrstvy: standardní deklaraci CSS box-shadow a třídu Tailwind s libovolnou hodnotou (shadow-[...]), kde jsou mezery nahrazeny podtržítky podle syntaktických pravidel Tailwindu. Kopírování jedním kliknutím používá navigator.clipboard.writeText.