Cum creez o umbră CSS box-shadow și cum copiez codul?

Ajustează cursoarele pentru decalajul x și y, blur, spread, Culoare și opacitate, urmărind previzualizarea live. Apoi apasă Copiază în secțiunea de ieșire CSS. Poți începe și de la Presetări, cum ar fi Moale, Strălucire sau Material 8.

Pot suprapune mai multe umbre pe același element?

Da. Apasă + Adaugă un alt strat de umbră pentru a adăuga mai multe straturi, apoi reordonează-le, Ascunde sau Elimină fiecare strat. Straturile sunt unite prin virgule într-o singură valoare box-shadow.

Cum creez o umbră interioară?

Selectează un strat și activează Umbră interioară sau încarcă presetarea Interior. Ieșirea va include apoi cuvântul cheie inset pentru acel strat.

Pot obține o clasă Tailwind în loc de CSS simplu?

Da. Pe lângă declarația CSS, unealta generează o clasă Tailwind cu valoare arbitrară de forma shadow-[...], cu spațiile înlocuite cu underscore, gata de inserat în markupul tău.

Există o modalitate mai ușoară de a seta poziția umbrei decât cursoarele?

Da. Trage de caseta de previzualizare pentru a muta umbra stratului activ și ține apăsat Shift pentru un control fin. De asemenea, poți schimba Previzualizare fundal și Culoare casetă pentru a vedea cum arată umbra pe designul tău.

Da. Fiecare unealtă este gratuită, fără cont și fără card de credit. Procesarea se face pe dispozitivul tău, nu pe serverele noastre, ceea ce ne permite să le oferim gratuit.

Funcționează pe mobil?

Da. Funcționează în browserele mobile actuale de pe iOS și Android, fără nimic de instalat.

🎨

Generator Umbră CSS Box — gratuit

Constructor vizual pentru box-shadow CSS cu previzualizare live, stivuire pe mai multe straturi, selector de culoare, comutator inset și copiere cu un clic. Include presetări Material, neumorfism și strălucire.

Rulează în browserFără înregistrare, fără ferestre pop-upFără autentificare necesarăGratuit pentru totdeauna

Funcționează offline odată încărcat

Previzualizare fundal

Trageți caseta pentru a poziţiona umbra stratului activ - ţineţi apăsat Shift pentru control fin

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

Presetări

Culoare casetă

Rază colț (16px)

x (0px)

y (4px)

estompare (12px)

extindere (0px)

Culoare

Opacitate (15%)

Umbră interioară

Utilizări frecvente

Umbra Cărți UIConstruiți umbre de cărți elegante pentru tablouri de bord, grile de produse și tablouri de bord.
Efecte de apăsare a butoanelorConstruiți umbre de butoane care imită adâncimea lumii reale și stări de apăsare.
Neumorphism UI moaleCreați aspectul soft-UI neumorphism cu umbre deschise și închise în perechi.
Umbre modal și PopoverCreați senzația ridicată și plutitoare pentru dialoguri și căsuțe cu cerc.
Efecte de strălucire și inel de focalizareCreați efecte de accent strălucitor, inele de focalizare și efecte în stil neon.

Cum funcționează

Generatorul de box-shadow este o unealtă React complet client-side — fără server, fără bibliotecă. Menține o listă de obiecte strat de umbră în stare, asamblează șiruri CSS box-shadow valide la fiecare schimbare folosind un formator rgba() scris manual, și le aplică direct pe un element de previzualizare prin prop-ul style al React, astfel încât motorul de randare propriu al browser-ului desenează rezultatul instant.

1
Parametrii stratului alimentează formatorul
Fiecare strat de umbră stochează decalajele x/y, blur, spread, o culoare hex, și o valoare de opacitate. La fiecare schimbare, o mică funcție shadowToCss convertește culoarea hex în componente RGB cu o expresie regulată, apoi asamblează șirul rgba() — de exemplu, 0px 4px 12px 0px rgba(0, 0, 0, 0.15). Straturile multiple sunt unite cu virgule.
2
Browser-ul randază previzualizarea live
Șirul asamblat este atribuit proprietății de stil boxShadow a unui element div direct în JSX. React actualizează atributul DOM, iar motorul CSS al browser-ului pictează umbra imediat — nu este implicat niciun canvas sau WebGL, doar randare CSS nativă.
3
Poziționarea prin tragere folosește API-ul Pointer Events
Clic și tragerea casetei de previzualizare apelează setPointerCapture pe element, apoi urmărește delta-urile onPointerMove pentru a actualiza decalajele x și y ale stratului activ în timp real. Ținând apăsat Shift se aplică un factor de scală de 0,25x pentru poziționare fină.
4
Ieșirea este copiată în clipboard
Unealta produce două formate de ieșire din aceleași date de strat: o declarație CSS box-shadow standard, și o clasă Tailwind cu valoare arbitrară (shadow-[...]) unde spațiile sunt înlocuite cu underscore-uri conform regulilor de sintaxă Tailwind. Copierea cu un clic folosește navigator.clipboard.writeText.