Generator de box-shadow CSS
Creați vizual valorile cutie-umbră. Setați decalajul orizontal și vertical în pixeli, raza de estompare (marginea moale), răspândirea (creșterea sau micșorarea umbrei înainte de estompare), culoarea, opacitatea și inserția opțională pentru umbrele interioare. Caseta de previzualizare se actualizează live; copiază declarația completă box-shadow în CSS. Înțelegeți modul în care fiecare parametru modifică altitudinea și adâncimea fără încercări și erori în devtools.
X (px)
Y (px)
Blur (px)
Spread (px)
Culoare
Opacitate (0–1)
CSS
box-shadow: 0px 8px 24px 0px rgba(20, 20, 20, 0.18);
Cum să construiești o umbră cutie
1. Setați offset X și Y — X pozitiv mută umbra la dreapta, Y pozitiv o mută în jos.
2. Reglați estomparea (moliciunea) și răspândirea (dimensiunea înainte de estompare).
3. Alege culoarea umbrei și opacitatea.
4. Comutați inserția dacă umbra ar trebui să apară în interiorul casetei; copiază CSS.
Rețete cu umbră
Înălțare soft card
offsetY 8px, estompare 24px, răspândit 0, negru la 18% opacitate — un card flotant în stil Material: box-shadow: 0 8px 24px rgba(20,20,20,0.18).
Umbră ascuțită
blur 0, spread 0, offsetY 4px — marginea tare ca un autocolant ridicat ușor de pe pagină.
Buton apăsat introdus
Activați inserția cu neclaritate mică — simulează un control apăsat sau îngropat în interiorul elementului.
Când să folosești acest instrument
• Când reglați adâncimea interfeței de utilizare pentru carduri, modale și butoane.
• Când înveți cum diferă estomparea de răspândire.
• Când documentezi jetoane de proiectare cu valori exacte de umbră.
Când să alegi altceva
• Când ai nevoie de mai multe umbre stivuite - copiază primul strat aici, apoi adăugați mai multe în CSS.
• Când vrei text-shadow - proprietate diferită cu sintaxă similară.
• Când ai nevoie de drop-shadow pe forme PNG neregulate — filter: drop-shadow() poate funcționa mai bine.
Citirea celor patru numere
box-shadow: 0 8px 24px 0 înseamnă x=0, y=8px down, blur=24px, spread=0. Omiteți răspândirea și răspândirea implicită a browserelor la 0. Neclaritate mare cu compensare zero creează o strălucire; offset mare cu neclaritate mică creează lumină direcțională.
Stratificarea umbrelor
Umbre multiple separate prin virgulă: box-shadow: 0 1px 2px rgba(0,0,0,0.1), 0 4px 12px rgba(0,0,0,0.15); Prima umbră pictează mai jos cele de mai târziu. Combinați o umbră întunecată strânsă cu una deschisă largă pentru o profunzime realistă.
Accesibilitate și performanță
Umbrele puternice pe zone animate mari pot costa timpul de vopsire a GPU-ului. Preferați umbrele subtile pentru interfețele de utilizator cu densitate de date. Asigurați-vă că elementele focalizate rămân vizibile - nu vă bazați doar pe umbră pentru a afișa starea; pereche cu chenar sau contur pentru utilizatorii de tastatură.
Întrebări frecvente
Care este sintaxa box-shadow?
box-shadow: offset-x offset-y blur-radius spread-radius culoare; Cuvântul cheie opțional inserat face o umbră interioară.
estompare vs răspândire?
Estomparea înmoaie marginea umbrei. Răspândirea extinde sau contractă forma umbrei înainte de a se estompa - răspândirea pozitivă se mărește, se micșorează negativ.
Ce unități ar trebui să folosesc?
Acest instrument produce pixeli (px), cea mai comună alegere pentru umbrele interfeței de utilizare a ecranului.
Ce face inset?
Inserarea desenează umbra în interiorul casetei de margine a elementului - util pentru intrări sau puțuri scufundate.
Culoarea umbrei poate fi semi-transparentă?
Da. Opacitatea este aplicată culorii alese, producând o ieșire rgba pentru margini netede pe fundaluri variate.
Sunt valorile trimise către un server?
Nu. Previzualizarea și CSS sunt locale.
Este gratuit?
Da, nu este nevoie de cont.