🎨

Besplatan Generator CSS box-shadow sjene

Vizuelni alat za CSS box-shadow uz prikaz uživo, slaganje više slojeva, birač boja, prekidač za inset i kopiranje jednim klikom. Uključuje predloške Material, neumorphism i sjaj.

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

Radi offline nakon učitavanja

Pozadina pregleda

Prevucite okvir da pozicionirate sjenu aktivnog sloja - držite Shift za finu kontrolu

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

Predefinisano

Boja okvira

Radijus ivice (16px)

x (0px)

y (4px)

zamućenje (12px)

širenje (0px)

Boja

Neprozirnost (15%)

Uvučena sjena

Kako radi

Generator box-shadow je potpuno klijentski React alat — bez servera, bez biblioteke. Održava listu objekata slojeva sjenke u stanju, sastavlja validne nizove CSS box-shadow pri svakoj promjeni koristeći ručno napisan formatter rgba(), i primjenjuje ih direktno na element za pregled putem React style svojstva tako da vlastiti mehanizam preglednika za iscrtavanje odmah crta rezultat.

1
Parametri sloja napajaju formatter
Svaki sloj sjenke čuva x/y pomake, zamućenje, širenje, hex boju, i vrijednost providnosti. Pri svakoj promjeni, mala funkcija shadowToCss pretvara hex boju u RGB komponente pomoću regularnog izraza, zatim sastavlja niz rgba() — na primjer, 0px 4px 12px 0px rgba(0, 0, 0, 0.15). Više slojeva se spaja zarezima.
2
Preglednik iscrtava pregled uživo
Sastavljeni niz se dodjeljuje svojstvu stila boxShadow div elementa direktno u JSX-u. React ažurira DOM atribut, i CSS mehanizam preglednika odmah boji sjenku — nema canvas-a ili WebGL-a uključenog, samo native CSS iscrtavanje.
3
Povlačenje za pozicioniranje koristi Pointer Events API
Klik i povlačenje kutije za pregled poziva setPointerCapture na elementu, zatim prati onPointerMove pomake da ažurira x i y pomake aktivnog sloja u realnom vremenu. Držanje Shift primjenjuje faktor skale 0,25x za precizno pozicioniranje.
4
Izlaz se kopira u međuspremnik
Alat proizvodi dva izlazna formata iz istih podataka sloja: standardnu CSS deklaraciju box-shadow, i Tailwind klasu proizvoljne vrijednosti (shadow-[...]) gdje se razmaci zamjenjuju donjim crtama prema Tailwind sintaksnim pravilima. Kopiranje jednim klikom koristi navigator.clipboard.writeText.