Box Shadow Generátor

Mi ez az eszköz?

A box-shadow az a CSS tulajdonság, amely árnyékot rajzol egy elem mögé (vagy belsejébe). Kézzel írva legfeljebb öt értéket vesz fel sorrendben — vízszintes eltolás, függőleges eltolás, elmosódási sugár, terjedési sugár és egy szín —, plusz egy opcionális inset kulcsszót, amit könnyű összekeverni, vagy első próbálkozásra túl finomra vagy túl erősre venni.

Ez az eszköz közvetlen manipulációvá alakítja ezt: húzz egy csúszkát, figyeld, ahogy az árnyék változik az élő előnézeti dobozon, és másold ki a pontos CSS-t, amikor jól néz ki. A színválasztó plusz egy átlátszatlanság-csúszka automatikusan megfelelő rgba() értéket generál, mivel az átlátszó árnyékok általában jobban néznek ki, mint a teljesen átlátszatlanok.

Miért érdemes használni?

• Az élő előnézet azonnal frissül bármely vezérlő módosításakor — lásd a pontos árnyékot, mielőtt véglegesítenéd a kódot.
• Teljes kontroll az offset-x, offset-y, elmosódás, terjedés, szín és átlátszatlanság felett egy helyen.
• Egy kattintással hozzáadhatod az insetet a benyomott/süllyesztett hatáshoz a lebegő vetett árnyék helyett.
• Beillesztésre kész CSS-t ad ki, a színt már a választott átlátszatlansággal rgba()-ra konvertálva.
• Teljes egészében a böngésződben fut — semmi, amit beállítasz, nem kerül feltöltésre sehova.
• Ingyenes, regisztráció nélkül, mobilon is működik.

Használati útmutató

1. Állítsd be az offset-x-et és offset-y-t az árnyék pozicionálásához — a pozitív értékek jobbra/lefelé, a negatívak balra/felfelé tolják.
2. Növeld az elmosódási sugarat az árnyék szélének lágyításához; növeld a terjedést, hogy az árnyék nagyobb legyen magánál az elemnél.
3. Válassz egy színt, és állítsd az átlátszatlanságot — a legtöbb valósághű árnyék 15–40%-os átlátszatlanságot használ tömör fekete helyett.
4. Jelöld be az "inset" opciót, ha azt szeretnéd, hogy az árnyék az elem keretén belül jelenjen meg, ne mögötte.
5. Másold ki a generált CSS-t, és illeszd be a stíluslapodba.

Példa

Bemenet

Eltolás: 0px, 10px · Elmosódás: 20px · Terjedés: 0px · Szín: fekete, 35%-os átlátszatlanság

Kimenet

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

Egy lágy árnyék közvetlenül az elem alatt, vízszintes eltolás nélkül — az egyik leggyakoribb kártya-/gombárnyék-stílus.

Egyetlen árnyék vs. rétegzett árnyékok

Ez az eszköz egyetlen árnyékréteget épít, ami a valós felhasználási esetek túlnyomó többségét lefedi — gombok, kártyák, modálok és lenyíló menük szinte mindig egyetlen árnyékot használnak. A CSS támogatja a vesszővel elválasztott, több árnyékot ugyanazon az elemen, kifinomultabb mélységhatásokhoz (pl. egy szoros, sötét árnyék egy lágy, széles alá rétegezve), de ez egy finomítás, amit kézzel adhatsz hozzá: generálj itt egy árnyékot, majd duplikáld a sort, állítsd be a második értékkészletet, és kösd össze vesszővel.

Gyakori box-shadow minták

• Finom kártyaemelés: kis eltolás (0–4px), közepes elmosódás (8–16px), 10–20%-os átlátszatlan fekete.
• Kiemelt modál/lenyíló: nagyobb eltolás (4–10px) és elmosódás (20–30px), 20–35%-os átlátszatlanság erősebb lebegésérzethez.
• Benyomott/inset gomb: jelöld be az insetet, használj enyhén negatívnak ható eltolást és közepes elmosódást, hogy az árnyék benyomódásként hasson, ne emelkedésként.
• Színes fény: válassz márkaszínt fekete helyett, emeld az átlátszatlanságot 40–60%-ra, és növeld kicsit a terjedést lágy fényhatáshoz gombok körül.
• Éles/kemény árnyék: állítsd az elmosódást 0-ra és a terjedést 0-ra egy tömör, eltolt sziluetthez lágy árnyék helyett.

Párosítás lekerekített sarkokkal

Az árnyékokat és a lekerekített sarkokat folyamatosan együtt használják — a kártyák, gombok és modálok szinte mindig kombinálják mindkettőt. Használd a Border Radius Generátort ugyanazon elem sarkainak lekerekítéséhez, majd alkalmazd mindkét generált CSS-deklarációt együtt.

→ Border Radius Generátor · Mértékegység-átváltó

Gyakori kérdések