CSS Box Shadow és Border Radius Generátor

CSS Box Shadow és Border Radius Generátor

🎨 Ingyenes CSS box-shadow és border-radius generátor élő előnézettel. Készíts gyönyörű árnyékokat, lekerekített sarkokat és modern UI effekteket. Másolás-beillesztésre kész kód webes dizájnhoz.

Box Shadow tulajdonság

A CSS box-shadow tulajdonság árnyékhatásokat ad egy elem kerete köré. Több effekt is beállítható, vesszőkkel elválasztva. Az árnyékot az elemhez viszonyított X és Y eltolás, az elmosás és terjedés sugara, valamint a szín írja le.

Szintaxis: box-shadow: [inset] [x-offset] [y-offset] [blur-radius] [spread-radius] [color];

Árnyék paraméterek

• X-eltolás (vízszintes): pozitív érték jobbra viszi az árnyékot, negatív balra
• Y-eltolás (függőleges): pozitív érték lefelé viszi az árnyékot, negatív felfelé
• Elmosás sugara: nagyobb érték nagyobb elmosást ad. 0 = éles árnyék
• Terjedés sugara: pozitív érték növeli az árnyékot, negatív csökkenti
• Szín: bármilyen CSS színérték (hex, rgb, rgba, hsl)
• Inset: belső árnyékká alakítja a külső helyett

Border Radius tulajdonság

A border-radius tulajdonság lekerekíti egy elem külső szegélyének sarkait. Egyetlen sugár megadásával köríves sarkokat, két sugárral pedig elliptikus sarkokat hozhatsz létre.

Szintaxis: border-radius: [top-left] [top-right] [bottom-right] [bottom-left];

Gyakori felhasználások

• Kártyák: finom árnyék (0 4px 6px rgba(0,0,0,0.1)) közepes sugárral (8px)
• Gombok: a gomb színéhez igazított színes árnyék a mélységhatásért
• Modálok: nagy árnyék (0 20px 25px rgba(0,0,0,0.15)), hogy „lebegjen”
• Képek: kör alakú avatarok (border-radius: 50%) vagy lekerekített bélyegképek (8–16px)
• Beviteli mezők: inset árnyék lenyomott/fókusz állapothoz
• Neumorf dizájn: több árnyék (világos és sötét) a háttérhez igazítva

Árnyék bevált gyakorlatok

• Használj finom árnyékokat: 10–20% átlátszóság általában elég a mélységhez
• Y-eltolás > X-eltolás: a felülről érkező természetes fényt utánozza
• Nagyobb blur a kiemelkedéshez: több elmosás = magasabban lebegő hatás
• Árnyékszín igazítása: használd az elem színét alacsony átlátszósággal az összhangért
• Teljesítmény: kerüld a box-shadow animálását, inkább opacity vagy transform

Népszerű árnyékstílusok

• Material Design: 0 2px 4px rgba(0,0,0,0.2), 0 1px 2px rgba(0,0,0,0.14)
• Tailwind SM: 0 1px 2px 0 rgba(0,0,0,0.05)
• Tailwind MD: 0 4px 6px -1px rgba(0,0,0,0.1)
• Tailwind LG: 0 10px 15px -3px rgba(0,0,0,0.1)
• Bootstrap: 0 0.5rem 1rem rgba(0,0,0,0.15)

Border Radius minták

• Nincs (0px): éles sarkok, modern minimalista megjelenés
• Kicsi (4px): finom lekerekítés inputokhoz, gombokhoz
• Közepes (8px): alapértelmezett kártyákhoz, konténerekhez
• Nagy (16px+): barátságos, megközelíthető dizájn
• Kapszula (999px vagy 50%): lekerekített végek tagekhez, badge-ekhez
• Kör (50%): avatarokhoz, ikon gombokhoz (négyzet elem szükséges)

Haladó technikák

• Többszörös árnyékok: kombináld az árnyékokat rétegelt effektekhez
• Fénylés (glow) effekt: 0 0 20px [szín] eltolás nélkül
• Neumorfizmus: világos árnyék bal-felül, sötét árnyék jobb-alul
• Fókusz gyűrűk: színes árnyék az akadálymentességhez (0 0 0 3px rgba(color,0.5))
• 3D hatás: több árnyék növekvő eltolással és elmosással

Böngésző támogatás

A box-shadow és a border-radius minden modern böngészőben támogatott. IE8 és régebbi esetén használhatsz vendor prefixeket (-webkit-box-shadow, -moz-box-shadow), bár ez ma már ritkán szükséges.

💡 Pro tipp: hover effektekhez ne animáld közvetlenül a box-shadow-t, mert erőforrásigényes. Inkább hozd létre az árnyékot egy pseudo-elemen (::before vagy ::after), és az opacity-ját animáld. Ugyanazt a vizuális hatást kapod, sokkal jobb teljesítménnyel, különösen mobilon!