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.
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ă.
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ă.
Î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.