Kako da kreiram CSS box-shadow i kopiram kod?

Podesite klizače za x i y pomak, zamućenje, širenje, Boju i prozirnost, prateći pregled uživo. Zatim pritisnite Kopiraj u CSS izlazu. Također možete krenuti od Unaprijed postavljenih poput Meka, Sjaj ili Material 8.

Mogu li složiti više sjena na jednom elementu?

Da. Pritisnite + Dodaj sloj sjene za dodavanje više slojeva, a zatim ih presložite, Sakrij ili Ukloni svaki pojedinačno. Slojevi se spajaju zarezima u jednu box-shadow vrijednost.

Kako da napravim unutarnju sjenu?

Odaberite sloj i uključite Unutarnja sjena ili učitajte unaprijed postavljenu Unutarnju sjenu. Izlaz tada uključuje ključnu riječ inset za taj sloj.

Mogu li dobiti Tailwind klasu umjesto običnog CSS-a?

Da. Osim CSS deklaracije, alat ispisuje i Tailwind klasu proizvoljne vrijednosti u obliku shadow-[...], s razmacima zamijenjenim donjim crtama, spremnu za lijepljenje u vaš kôd.

Postoji li lakši način za postavljanje položaja sjene od klizača?

Da. Povucite okvir za pregled kako biste pomaknuli sjenu aktivnog sloja, a držite Shift za finu kontrolu. Također možete promijeniti Pregled pozadine i Boju okvira kako biste vidjeli kako sjena izgleda na vašem dizajnu.

Je li stvarno besplatno?

Da. Svaki alat je besplatan za korištenje, bez računa i bez kreditne kartice. Rad se odvija na vašem uređaju, a ne na našim poslužiteljima, što omogućuje da ostane besplatan.

Radi li na mobilnim uređajima?

Da. Radi u aktualnim mobilnim preglednicima na iOS-u i Androidu, bez instalacije.

🎨

Generator CSS box-shadow — besplatno

Vizualni alat za CSS box-shadow s živim pregledom, slaganjem više slojeva, biranjem boje, umetnutim preklopnim gumbom i kopiranjem jednim klikom. Uključuje Material, neumorfizam i sjajne predloške.

Radi u preglednikuBez registracije, bez skočnih prozoraNije potrebna prijavaBesplatno zauvijek

Radi offline nakon učitavanja

Pregled pozadine

Povuci kutiju da postaviš sjenu aktivnog sloja - drži Shift za finu kontrolu

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

Unaprijed postavljeni

Boja okvira

Polumjer ruba (16px)

x (0px)

y (4px)

zamućenje (12px)

širenje (0px)

Boja

Prozirnost (15%)

Unutarnja sjena

Uobičajene namjene

Kartice UI sjeneIzgradi elegantne sjene kartica za kontrolne ploče, mrežu proizvoda i kontrolne ploče.
Efekti pritiska gumbaIzgradi sjene gumba koje podržavaju dubinu stvarnog svijeta i države pritiska.
Neumorphism mekan UIKreiraj izgled mekog UI neumorphisma sa parenim svijetlim + tamnim sjenkama.
Modal & Popover sjeneKreiraj osjećaj podignutosti i plutanja za dijaloge i padajuće liste.
Efekti sjaja i fokusa prstenaKreirajte sjajne akcentne efekte, fokusne prstenove i neon-stilne isticanja.

Kako funkcionira

Generator box-shadow je potpuno klijentski React alat — bez poslužitelja, bez biblioteke. Održava popis objekata slojeva sjene u stanju, sastavlja valjane CSS box-shadow nizove pri svakoj promjeni koristeći ručno napisani rgba() formatator, i primjenjuje ih izravno na element pregleda putem React style svojstva tako da vlastiti mehanizam renderiranja preglednika trenutačno crta rezultat.

1
Parametri sloja hrane formatator
Svaki sloj sjene pohranjuje x/y pomake, zamućenje, širenje, hex boju i vrijednost prozirnosti. Pri svakoj promjeni, mala funkcija shadowToCss pretvara hex boju u RGB komponente pomoću regularnog izraza, zatim sastavlja rgba() niz — na primjer, 0px 4px 12px 0px rgba(0, 0, 0, 0.15). Više slojeva spaja se zarezima.
2
Preglednik renderira pregled uživo
Sastavljeni niz dodjeljuje se svojstvu stila boxShadow div elementa izravno u JSX-u. React ažurira DOM atribut, a CSS mehanizam preglednika odmah crta sjenu — nema platna ni WebGL-a, samo izvorno CSS renderiranje.
3
Povlačenje za pozicioniranje koristi Pointer Events API
Klikanje i povlačenje okvira pregleda poziva setPointerCapture na elementu, zatim prati delte onPointerMove za ažuriranje x i y pomaka aktivnog sloja u stvarnom vremenu. Držanje Shifta primjenjuje faktor skaliranja 0,25x za precizno pozicioniranje.
4
Izlaz se kopira u međuspremnik
Alat proizvodi dva izlazna formata iz istih podataka sloja: standardnu CSS box-shadow deklaraciju i Tailwind klasu proizvoljne vrijednosti (shadow-[...]) gdje se razmaci zamjenjuju podvlakama prema Tailwind sintaksnim pravilima. Kopiranje jednim klikom koristi navigator.clipboard.writeText.