CSS Box Shadow Generator

Što je CSS box-shadow?

CSS svojstvo box-shadow dodaje efekte sjene oko okvira elementa. Sjene su temeljni alat za stvaranje dubine, elevacije i vizualne hijerarhije u web dizajnu. Dobro oblikovana sjena može natjerati karticu da izgleda kao da lebdi iznad stranice ili dati gumbu privid pritiskanja.

box-shadow prihvaća više parametara: horizontalni odmak, vertikalni odmak, polumjer zamućenja, polumjer raspršivanja i boja. Možete dodati i ključnu riječ inset za stvaranje unutarnjih sjena. Na jednom elementu može se slojiti više sjena razdvojenih zarezima, a prikazuju se od zadnje prema prvoj.

Raščlamba sintakse box-shadowa

Potpuna sintaksa je: box-shadow: [inset] offset-x offset-y [blur-radius] [spread-radius] color. Vrijednosti offset-x i offset-y su obavezne i definiraju položaj sjene u odnosu na element. Pozitivne vrijednosti pomiču sjenu udesno i prema dolje. Blur-radius omekšava rubove — vrijednost 0 stvara oštru sjenu. Spread-radius proširuje ili sužava sjenu — negativne vrijednosti stvaraju ujednačeniju sjenu.

Kako koristiti ovaj alat

Podesite klizače za horizontalni odmak, vertikalni odmak, zamućenje, raspršivanje i boju. Pregled se ažurira u stvarnom vremenu tako da točno vidite kako će sjena izgledati. Uključite opciju inset za unutarnje sjene. Dodajte više slojeva sjena za realističnije efekte dubine. Kad ste zadovoljni, kopirajte generirani CSS kod.

Savjeti za učinkovite sjene

• Koristite suptilne sjene s niskom opacitetom za čist, moderan, uzdignut izgled.
• Slažite više sjena za realističniju dubinu — ostra bliska sjena plus meka difuzna sjena oponaša osvjetljenje u stvarnom svijetu.
• Veće zamućenje s blagim odmakom stvara mekani efekt lebdenja idealan za kartice i modalne prozore.
• Negativno raspršivanje stvara ujednačeniju, fokusiraniju sjenu korisnu za suptilne obrube.
• Dosljednost smjera sjene na cijeloj stranici — nedosljedni izvori svjetla izgledaju neprirodno.

Material Design sustav elevacije

Googleov Material Design definira razine elevacije od 0dp do 24dp, svaka s određenim vrijednostima sjene. Viša elevacija znači veće zamućenje i veći odmak. Ovaj sustav osigurava konzistentnu vizualnu hijerarhiju u aplikaciji. Čak i ako ne slijedite Material Design, princip korištenja konzistentnih razina elevacije vrijedan je za svaki dizajnerski sustav.

Utjecaj na performanse

Sjene kutija GPU-ubrzane su u modernim preglednicima i imaju minimalan utjecaj na performanse za tipičnu upotrebu. Međutim, vrlo veliki polumjeri zamućenja (50px+) na mnogim elementima istovremeno mogu uzrokovati padove FPS-a tijekom animacija. Ako trebate animirati sjene, razmotrite korištenje transform: scale() za rast pseudo-elementa sa statičnom sjenom umjesto izravne animacije vrijednosti sjene.

Često postavljana pitanja

Koja je razlika između box-shadowa i drop-shadowa?

box-shadow primjenjuje se na pravokutni okvir elementa, uključujući padding i border. Funkcija filter: drop-shadow() prati stvarni oblik elementa, uključujući prozirna područja u slikama. Koristite drop-shadow za nepravokutne elemente poput ikona ili PNG slika s prozirnosti.

Mogu li koristiti box-shadow za stvaranje obruba?

Da. box-shadow s nultim zamućenjem i pozitivnim raspršivanjem djeluje kao obrub koji ne utječe na raspored. Ova tehnika je korisna kada trebate vizualni obrub bez promjene dimenzija elementa, na primjer tijekom stanja hover.