CodeKitHubŠto je ovaj alat?
box-shadow je CSS svojstvo koje iscrtava sjenu iza (ili unutar) elementa. Ručno napisano zahtijeva do pet vrijednosti u ovom redoslijedu — vodoravni pomak, okomiti pomak, radijus zamućenja, radijus širenja i boju — plus opcionalnu ključnu riječ inset, a sve to je lako pomiješati ili učiniti previše suptilnim/prejakim već iz prvog pokušaja.
Ovaj alat to pretvara u izravnu manipulaciju: povucite klizač, gledajte kako se sjena mijenja u prikazu uživo, i kopirajte točan CSS kad izgleda ispravno. Birač boje zajedno s klizačem prozirnosti automatski generira ispravnu rgba() vrijednost, budući da prozirne sjene općenito izgledaju bolje od potpuno neprozirnih.
Zašto ga koristiti?
- Prikaz uživo ažurira se trenutno dok podešavate bilo koju kontrolu — vidite točnu sjenu prije nego što se obvežete na kod.
- Potpuna kontrola nad offset-x, offset-y, zamućenjem, širenjem, bojom i prozirnošću na jednom mjestu.
- Jednim klikom dodajte inset za izgled utisnutog/udubljenog elementa umjesto lebdeće sjene.
- Izlaz spreman za kopiranje i lijepljenje s bojom već pretvorenom u rgba() prema odabranoj prozirnosti.
- Radi u cijelosti u vašem pregledniku — ništa što konfigurirate ne šalje se nikamo.
- Besplatno, bez registracije, radi na mobitelu.
Kako ga koristiti
- Postavite offset-x i offset-y kako biste pozicionirali sjenu — pozitivne vrijednosti pomiču je desno/dolje, negativne lijevo/gore.
- Povećajte radijus zamućenja kako biste omekšali rub sjene; povećajte širenje kako bi sjena bila veća od samog elementa.
- Odaberite boju i podesite prozirnost — najrealističnije sjene koriste 15–40% prozirnosti umjesto pune crne.
- Označite 'inset' ako želite da se sjena pojavi unutar obruba elementa umjesto iza njega.
- Kopirajte generirani CSS i zalijepite ga u svoju stylesheet datoteku.
Primjer
Ulaz
Pomak: 0px, 10px · Zamućenje: 20px · Širenje: 0px · Boja: crna pri 35% prozirnostiIzlaz
box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.35);Meka sjena izravno ispod elementa bez vodoravnog pomaka — jedan od najčešćih stilova sjene za kartice/gumbe.
Jedna sjena naspram slojevitih sjena
Ovaj alat izrađuje jedan sloj sjene, što pokriva veliku većinu stvarne uporabe — gumbi, kartice, modalni prozori i padajući izbornici gotovo uvijek koriste jednu sjenu. CSS podržava i više sjena razdvojenih zarezima na istom elementu za razrađenije efekte dubine (npr. uska, tamna sjena slojevita ispod meke, široke), ali to je usavršavanje koje možete dodati ručno: generirajte jednu sjenu ovdje, zatim udvostručite redak, prilagodite drugi skup vrijednosti i spojite ih zarezom.
Uobičajeni obrasci box-shadowa
- Suptilno podizanje kartice: mali pomak (0–4px), umjereno zamućenje (8–16px), 10–20% prozirnost crne.
- Uzdignuti modal/padajući izbornik: veći pomak (4–10px) i zamućenje (20–30px), 20–35% prozirnosti za jači dojam lebdenja.
- Utisnut/pritisnut gumb: označite inset, koristite mali pomak koji djeluje 'negativno' i umjereno zamućenje kako bi se sjena doživljavala kao udubljenje, a ne podizanje.
- Obojeni sjaj: odaberite boju brenda umjesto crne, povećajte prozirnost na 40–60%, i malo povećajte širenje za mekan efekt sjaja oko gumba.
- Oštra/tvrda sjena: postavite zamućenje na 0 i širenje na 0 za čvrstu, pomaknutu siluetu umjesto meke sjene.
Kombiniranje sa zaobljenim kutovima
Sjene i zaobljeni kutovi neprestano se koriste zajedno — kartice, gumbi i modalni prozori gotovo uvijek kombiniraju oboje. Koristite Generator border-radius za zaobljivanje kutova istog elementa, a zatim primijenite obje generirane CSS deklaracije zajedno.
Često postavljana pitanja
Koja je razlika između zamućenja i širenja?
Radijus zamućenja omekšava rub sjene — veće vrijednosti čine da postupnije nestaje. Radijus širenja mijenja veličinu sjene prije zamućenja — pozitivno širenje čini sjenu većom od elementa sa svih strana, negativno širenje je smanjuje. Većina svakodnevnih sjena koristi zamućenje uz širenje ostavljeno na 0.
Zašto koristiti rgba() umjesto obične heksadecimalne boje za sjenu?
Potpuno neprozirna sjena izgleda oštro i nerealistično — stvarne sjene su uvijek donekle prozirne, dopuštajući da se ono što je iza njih blago vidi. rgba() omogućuje izravno postavljanje te prozirnosti, zato ovaj alat uvijek daje boju s vrijednošću alfa umjesto pune heksadecimalne.
Što radi ključna riječ inset?
Bez inseta, sjena se iscrtava izvan obruba elementa, kao da element lebdi iznad stranice. S insetom, sjena se umjesto toga iscrtava unutar obruba, čineći da element izgleda utisnuto ili udubljeno — često se koristi za aktivna/pritisnuta stanja gumba ili polja za unos.
Mogu li slagati više od jedne sjene na istom elementu?
Da — CSS box-shadow prihvaća popis odvojen zarezima, a preglednici ih iscrtavaju redoslijedom kojim su navedene (prva sjena je na vrhu). Uobičajena tehnika sloji usku, tamniju sjenu sa širom, mekšom za realističniju dubinu nego što bi svaka zasebno pružila.
Utječe li box-shadow na raspored ili samo na izgled?
Samo na izgled — box-shadow nikada ne utječe na veličinu elementa ili položaj okolnih elemenata, čak ni s velikim vrijednostima zamućenja ili širenja. Ako se sjena vizualno odsijeca, provjerite overflow: hidden na roditeljskom elementu, a ne vlastite vrijednosti sjene.