Hogyan hozhatok létre CSS dobozárnyékot és másolhatom ki a kódját?

Állítsd be az x és y eltolás, az elmosás, a terjesztés, a Szín és az átlátszóság csúszkáit, miközben figyeled az élő előnézetet. Ezután nyomd meg a Másolás gombot a CSS kimenetnél. Kezdheted az Előbeállítások valamelyikével is, például a Lágy, Ragyogás vagy Material 8 opcióval.

Rakhatok több árnyékot is egy elemre?

Igen. Nyomd meg a + Újabb árnyékréteg hozzáadása gombot további rétegek felvételéhez, majd rendezd át őket, illetve rejtsd el vagy távolítsd el bármelyiket. A rétegek vesszővel elválasztva jelennek meg egyetlen box-shadow értékben.

Hogyan készíthetek belső árnyékot?

Válassz ki egy réteget, és kapcsold be a Bemélyedő opciót, vagy töltsd be a Bemélyedő előbeállítást. A kimenet ekkor tartalmazza az inset kulcsszót az adott réteghez.

Kaphatok Tailwind osztályt a sima CSS helyett?

Igen. A CSS deklaráció mellett az eszköz egy shadow-[...] formátumú, tetszőleges értékű Tailwind osztályt is kiad, ahol a szóközök aláhúzással vannak helyettesítve, így rögtön beillesztheted a jelölőnyelvedbe.

Van egyszerűbb módja az árnyék pozíciójának beállítására a csúszkákon kívül?

Igen. Húzd az előnézeti dobozt az aktív réteg árnyékának mozgatásához, és tartsd lenyomva a Shift billentyűt a finomhangoláshoz. Az Előnézet háttér és a Doboz színe opciókkal is megnézheted, hogyan mutat az árnyék a terveden.

Igen. Minden eszköz ingyenesen használható, fiók és bankkártya nélkül. A munka a szervereink helyett a te eszközödön fut, ezért maradhat ingyenes a használata.

Igen. Az iOS és Android jelenlegi mobilböngészőiben fut, telepítés nélkül.

🎨

Ingyenes CSS dobozárnyék-generátor

Vizuális szerkesztő CSS box-shadow-hoz élő előnézettel, többrétegű halmozással, színválasztóval, befelé fordítható kapcsolóval és egyetlen kattintással másolható. Material, neumorfizmus és ragyogás előbeállításokat tartalmaz.

A böngésződben futNincs regisztráció, nincs felugró ablakNem szükséges bejelentkezésÖrökre ingyenes

Betöltés után offline is működik

Előnézet háttér

Húzza a dobozt az aktív réteg árnyékának pozicionálásához - a Shift lenyomva tartásával finom vezérlés

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

Előbeállítások

Doboz színe

Lekerekítés (16px)

x (0px)

y (4px)

elmosás (12px)

terjesztés (0px)

Szín

Átlátszóság (15%)

Belső árnyék

Gyakori felhasználások

Kártya UI árnyékokÉpítsen elegáns kártya árnyékokat az irányítópultokhoz, termékrácsokhoz és irányítópultokhoz.
Gomb nyomás effektusokÉpítsen gomb árnyékokat, amelyek utánozzák a valós világok mélységét és nyomás államait.
Neumorphism puha UIHozza létre a soft-UI neumorphism kinézetet az párosított világos + sötét árnyékokkal.
Modal & Popover árnyékokHozza létre az emelt, lebegő érzést a párbeszédekhez és legördülőkhöz.
Ragyogás és fókusz gyűrű effektusokHozzon létre ragyogó hangsúly effektusokat, fókusz gyűrűket és neon stílusú kiemeléseket.

Hogyan működik

A box-shadow generátor egy teljesen kliensoldali React eszköz — nincs szerver, nincs könyvtár. Egy árnyékréteg-objektumok listáját tartja fenn állapotban, érvényes CSS box-shadow karakterláncokat állít össze minden változáskor egy kézzel írt rgba() formázóval, és közvetlenül alkalmazza őket egy előnézeti elemre a React style prop-ján keresztül, így a böngésző saját renderelőmotorja azonnal kirajzolja az eredményt.

1
A rétegparaméterek táplálják a formázót
Minden árnyékréteg tárol x/y eltolásokat, elmosódást, terjedést, egy hex színt és egy átlátszatlansági értéket. Minden változáskor egy kis shadowToCss függvény regex segítségével RGB komponensekké alakítja a hex színt, majd összeállítja az rgba() karakterláncot — például 0px 4px 12px 0px rgba(0, 0, 0, 0.15). Több réteg vesszőkkel kerül összefűzésre.
2
A böngésző rendereli az élő előnézetet
Az összeállított karakterlánc közvetlenül a JSX-ben egy div elem boxShadow stílustulajdonságához kerül hozzárendelésre. A React frissíti a DOM attribútumot, és a böngésző CSS-motorja azonnal kifesti az árnyékot — nincs canvas vagy WebGL érintve, csak natív CSS renderelés.
3
A pozicionáláshoz való húzás a Pointer Events API-t használja
Az előnézeti doboz kattintása és húzása meghívja a setPointerCapture-t az elemen, majd nyomon követi az onPointerMove delta értékeket az aktív réteg x és y eltolásainak valós idejű frissítéséhez. A Shift nyomva tartása 0,25x-es skálázási faktort alkalmaz finomhangolt pozicionáláshoz.
4
A kimenet a vágólapra kerül másolásra
Az eszköz két kimeneti formátumot állít elő ugyanazokból a rétegadatokból: egy standard CSS box-shadow deklarációt, és egy Tailwind tetszőleges-érték osztályt (shadow-[...]), ahol a szóközök aláhúzásokra cserélődnek a Tailwind szintaxisszabályai szerint. Egykattintásos másolás a navigator.clipboard.writeText-et használja.