Ako vytvorím CSS box-shadow a skopírujem kód?

Nastavte posuvníky pre posun x a y, rozmazanie, rozšírenie, Farbu a Priehľadnosť a sledujte živý náhľad. Potom stlačte Kopírovať vo výstupe CSS. Môžete tiež začať z Predvolieb, ako sú Jemný, Žiara alebo Material 8.

Môžem na jeden prvok navrstviť viacero tieňov?

Áno. Stlačte + Pridať ďalšiu vrstvu tieňa, čím pridáte ďalšie vrstvy, potom ich môžete preusporiadať, Skryť alebo Odstrániť každú z nich. Vrstvy sú spojené čiarkami v jednej hodnote box-shadow.

Ako vytvorím vnútorný tieň?

Vyberte vrstvu a zapnite Vnútorný tieň alebo načítajte predvoľbu Inset. Výstup potom pre túto vrstvu obsahuje kľúčové slovo inset.

Môžem získať triedu Tailwind namiesto obyčajného CSS?

Áno. Okrem CSS deklarácie nástroj vygeneruje aj triedu Tailwind s ľubovoľnou hodnotou v tvare shadow-[...], s medzerami nahradenými podčiarkovníkmi, pripravenú na vloženie do vášho kódu.

Existuje jednoduchší spôsob nastavenia pozície tieňa ako pomocou posuvníkov?

Áno. Potiahnutím poľa náhľadu posuniete tieň aktívnej vrstvy a podržaním Shiftu získate jemné ovládanie. Môžete tiež zmeniť Náhľad pozadia a Farbu boxu, aby ste videli, ako tieň vyzerá na vašom dizajne.

Je to naozaj zadarmo?

Áno. Každý nástroj je zadarmo, bez účtu a bez kreditnej karty. Práca prebieha vo vašom zariadení, nie na našich serveroch, vďaka čomu je jej prevádzka bezplatná.

Funguje to na mobile?

Áno. Funguje v aktuálnych mobilných prehliadačoch na iOS a Androide, bez inštalácie.

🎨

Generátor CSS tieňa rámčeka zadarmo

Vizuálny nástroj na tvorbu CSS box-shadow so živým náhľadom, vrstvením viacerých vrstiev, výberom farby, prepínačom vnorenia a kopírovaním jedným kliknutím. Zahŕňa prednastavenia Material, neumorfizmu a záre.

Beží vo vašom prehliadačiBez registrácie, bez vyskakovacích okienPrihlásenie nie je potrebnéZadarmo navždy

Po načítaní funguje offline

Náhľad pozadia

Potiahnite pole, aby ste umiestnili tieň aktívnej vrstvy — podržte Shift pre jemné ovládanie

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

Predvolby

Farba boxu

Polomer rohov (16px)

x (0px)

y (4px)

rozostrenie (12px)

rozptyl (0px)

Farba

Nepriehľadnosť (15%)

Inset tieň

Bežné použitia

Karty UI tieneniaVytvorte elegantné tiene kariet na palubách, sieťach produktov a paneloch.
Efekty tlačidla PressVytvorte tiene tlačidla, ktoré napodobňujú hĺbka a pracovnú stavy z reálneho sveta.
Neumorphism mäkký UIVytvorte mäkký UI neumorphism vzhľad s párovými svetlými + temnými tienami.
Modal & Popover tieneVytvorte povýšený, plávajúci pocit pre dialógy a rozbaľovacieho menu.
Efekty žiaru a ohniska prstencaVytvárajte žiariace akcentné efekty, fokusné prstence a svetelné zvýraznenia v štýle neónu.

Ako to funguje

Generátor box-shadow je plne klientský React nástroj — bez servera, bez knižnice. Udržiava zoznam objektov vrstiev tieňa v stave, pri každej zmene zostavuje platné reťazce CSS box-shadow pomocou ručne napísaného formátovača rgba() a aplikuje ich priamo na element náhľadu cez React props style, takže vlastný vykresľovací engine prehliadača okamžite nakreslí výsledok.

1
Parametre vrstvy napájajú formátovač
Každá vrstva tieňa uchováva posuny x/y, rozostrenie, rozptyl, hex farbu a hodnotu priehľadnosti. Pri každej zmene malá funkcia shadowToCss prevedie hex farbu na zložky RGB pomocou regulárneho výrazu a potom zostaví reťazec rgba() — napríklad 0px 4px 12px 0px rgba(0, 0, 0, 0.15). Viacero vrstiev sa spája čiarkami.
2
Prehliadač vykresľuje živý náhľad
Zostavený reťazec sa priradí do vlastnosti štýlu boxShadow elementu div priamo v JSX. React aktualizuje atribút DOM a CSS engine prehliadača okamžite vykreslí tieň — nie je zapojený žiadny canvas ani WebGL, len natívne CSS vykresľovanie.
3
Presúvanie polohy myšou používa Pointer Events API
Kliknutie a ťahanie náhľadového rámu volá setPointerCapture na elemente a potom sleduje delty onPointerMove, aby v reálnom čase aktualizovalo posuny x a y aktívnej vrstvy. Podržanie Shift aplikuje faktor mierky 0,25x pre jemné dolaďovanie polohy.
4
Výstup sa kopíruje do schránky
Nástroj produkuje dva výstupné formáty z tých istých dát vrstiev: štandardnú CSS deklaráciu box-shadow a Tailwind triedu s ľubovoľnou hodnotou (shadow-[...]), kde sú medzery nahradené podčiarkovníkmi podľa syntaktických pravidiel Tailwindu. Kopírovanie jedným kliknutím používa navigator.clipboard.writeText.