Kako da kreiram CSS box-shadow i kopiram kod?

Podesite klizače za x i y pomeraj, zamućenje, širenje, Boju i providnost, posmatrajući pregled uživo. Zatim pritisnite Kopiraj u CSS izlazu. Takođe možete početi od Unapred podešenih vrednosti kao što su Meka, Sjaj ili Material 8.

Mogu li da složim više senki na jedan element?

Da. Pritisnite + Dodaj sloj senke da dodate još slojeva, a zatim ih preuredite, Sakrijte ili Uklonite svaki. Slojevi se spajaju zarezima u jednoj box-shadow vrednosti.

Kako da napravim unutrašnju senku?

Izaberite sloj i uključite Unutrašnja senka ili učitajte unapred podešenu vrednost Utisnuto. Izlaz tada uključuje ključnu reč inset za taj sloj.

Mogu li da dobijem Tailwind klasu umesto običnog CSS-a?

Da. Pored CSS deklaracije, alat daje i Tailwind klasu proizvoljne vrednosti u obliku shadow-[...], sa razmacima zamenjenim donjim crtama, spremnu za lepljenje u vaš kod.

Postoji li lakši način za podešavanje položaja senke od klizača?

Da. Prevucite okvir za pregled da pomerite senku aktivnog sloja i držite Shift za finu kontrolu. Takođe možete promeniti Pregled pozadine i Boju okvira da vidite kako senka izgleda na vašem dizajnu.

Da li je zaista besplatno?

Da. Svaka alatka je besplatna za korišćenje, bez naloga i bez kreditne kartice. Obrada se obavlja na vašem uređaju, a ne na našim serverima, što omogućava da ostane besplatna.

Da li radi na mobilnim uređajima?

Da. Radi u aktuelnim mobilnim pregledačima na iOS-u i Androidu, bez instalacije.

🎨

Generator CSS box-shadow efekta — besplatno

Vizuelni alat za CSS box-shadow sa pregledom uživo, slaganjem više slojeva, biranjem boje, prekidačem za unutrašnju senku i kopiranjem jednim klikom. Uključuje predloške Material, neumorfizma i sjaja.

Radi u pregledačuBez registracije, bez iskačućih prozoraNije potrebna prijavaBesplatno zauvek

Radi van mreže kada se učita

Pregled pozadine

Prevucite kutiju da pozicionirate senku aktivnog sloja - držite Shift za preciznu kontrolu

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

Unapred podešeni

Boja okvira

Poluprečnik ivice (16px)

x (0px)

y (4px)

zamućenje (12px)

širenje (0px)

Boja

Providnost (15%)

Unutrašnja senka

Uobičajene upotrebe

Kartica UI senkeNapravite elegantne senke kartica za komandne table, mreže proizvoda i komandne table.
Efekti pritiska dugmetaNapravite senke dugmeta koja oponašaju dubinu i stanja pritiska iz prave sveta.
Neumorphism meka UINapravite meku UI neumorphism izgled sa uparenim svetlim + tamnim senkama.
Modal & Popover senkeNapravite podignut, plutajući osećaj za dijaloge i padajuće liste.
Efekti sjaja i fokusa prstenaKreirajte sjajne akcentne efekte, fokusne prstenove i neon-style ističuće efekte.

Kako funkcioniše

Generator box-shadow je potpuno klijentska React alatka — bez servera, bez biblioteke. Održava listu objekata slojeva senke u stanju, sastavlja validne CSS box-shadow nizove pri svakoj promeni koristeći ručno napisan rgba() formater, i primenjuje ih direktno na element pregleda preko React style prop-a tako da sopstveni mehanizam za iscrtavanje pregledača trenutno crta rezultat.

1
Parametri sloja napajaju formater
Svaki sloj senke čuva x/y pomake, zamućenje, širenje, hex boju, i vrednost neprozirnosti. Pri svakoj promeni, mala funkcija shadowToCss pretvara hex boju u RGB komponente pomoću regularnog izraza, a zatim sastavlja rgba() niz — na primer, 0px 4px 12px 0px rgba(0, 0, 0, 0.15). Više slojeva se spaja zarezima.
2
Pregledač iscrtava pregled uživo
Sastavljeni niz se dodeljuje svojstvu stila boxShadow div elementa direktno u JSX-u. React ažurira DOM atribut, i CSS mehanizam pregledača odmah boji senku — nema uključenog platna (canvas) ni WebGL-a, samo prirodno CSS iscrtavanje.
3
Prevlačenje za pozicioniranje koristi Pointer Events API
Klik i prevlačenje kutije pregleda poziva setPointerCapture na elementu, a zatim prati delte onPointerMove da ažurira x i y pomake aktivnog sloja u realnom vremenu. Držanje Shift-a primenjuje faktor skaliranja od 0,25x za precizno pozicioniranje.
4
Izlaz se kopira u privremenu memoriju
Alatka proizvodi dva izlazna formata iz istih podataka sloja: standardnu CSS deklaraciju box-shadow, i Tailwind klasu proizvoljne vrednosti (shadow-[...]) gde se razmaci zamenjuju donjim crtama prema Tailwind pravilima sintakse. Kopiranje jednim klikom koristi navigator.clipboard.writeText.