CodeKitHubCe este acest instrument?
box-shadow este proprietatea CSS care desenează o umbră în spatele (sau în interiorul) unui element. Scrisă manual, ia până la cinci valori în ordine — decalaj orizontal, decalaj vertical, raza de estompare, raza de extindere și o culoare — plus un cuvânt cheie opțional inset, toate ușor de încurcat sau de făcut prea subtile/prea puternice din prima încercare.
Acest instrument transformă asta în manipulare directă: trage un slider, urmărește umbra schimbându-se pe caseta de previzualizare live, și copiază CSS-ul exact odată ce arată bine. Selectorul de culoare plus un slider de opacitate generează automat o valoare rgba() corectă, deoarece umbrele transparente arată în general mai bine decât cele complet opace.
De ce să-l folosești?
- Previzualizare live actualizată instant pe măsură ce ajustezi orice control — vezi umbra exactă înainte de a te angaja în cod.
- Control complet asupra offset-x, offset-y, blur, spread, culoare și opacitate într-un singur loc.
- Un clic adaugă inset pentru un aspect apăsat/adâncit în loc de o umbră proiectată plutitoare.
- Generează CSS gata de lipit cu culoarea deja convertită în rgba() la opacitatea aleasă de tine.
- Rulează complet în browserul tău — nimic din ce configurezi nu este încărcat nicăieri.
- Gratuit, fără înregistrare, funcționează pe mobil.
Cum se folosește
- Setează offset-x și offset-y pentru a poziționa umbra — valorile pozitive o împing la dreapta/jos, cele negative la stânga/sus.
- Crește raza de estompare pentru a înmuia marginea umbrei; crește extinderea pentru a face umbra mai mare decât elementul însuși.
- Alege o culoare și ajustează opacitatea — cele mai realiste umbre folosesc 15–40% opacitate, nu negru solid.
- Bifează „inset” dacă vrei ca umbra să apară în interiorul marginii elementului, nu în spatele ei.
- Copiază CSS-ul generat și lipește-l în foaia ta de stiluri.
Exemplu
Intrare
Decalaj: 0px, 10px · Estompare: 20px · Extindere: 0px · Culoare: negru la 35% opacitateRezultat
box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.35);O umbră moale direct sub element, fără decalaj orizontal — unul dintre cele mai comune stiluri de umbră pentru carduri/butoane.
Umbră unică vs. umbre stratificate
Acest instrument construiește un singur strat de umbră, care acoperă majoritatea covârșitoare a utilizărilor reale — butoane, carduri, modale și meniuri derulante folosesc aproape întotdeauna o singură umbră. CSS suportă mai multe umbre separate prin virgulă pe același element pentru efecte de profunzime mai elaborate (de exemplu, o umbră strânsă, întunecată, stratificată sub una moale, largă), dar aceasta este o rafinare pe care o poți adăuga manual: generează o umbră aici, apoi duplică linia, ajustează al doilea set de valori și unește-le cu o virgulă.
Modele comune de box-shadow
- Ridicare subtilă a cardului: decalaj mic (0–4px), estompare moderată (8–16px), negru la 10–20% opacitate.
- Modal/meniu derulant ridicat: decalaj (4–10px) și estompare (20–30px) mai mari, 20–35% opacitate pentru un sentiment de plutire mai puternic.
- Buton apăsat/inset: bifează inset, folosește un decalaj ușor negativ și estompare moderată, astfel încât umbra să pară o adâncitură, nu o ridicare.
- Strălucire colorată: alege o culoare de brand în loc de negru, crește opacitatea la 40–60% și mărește ușor extinderea pentru un efect de strălucire moale în jurul butoanelor.
- Umbră ascuțită/dură: setează estomparea la 0 și extinderea la 0 pentru un contur solid, decalat, în loc de o umbră moale.
Combinarea cu colțuri rotunjite
Umbrele și colțurile rotunjite sunt folosite împreună în mod constant — cardurile, butoanele și modalele aproape întotdeauna combină ambele. Folosește Generatorul Border Radius pentru a rotunji colțurile aceluiași element, apoi aplică ambele declarații CSS generate împreună.
Întrebări frecvente
Care e diferența dintre estompare și extindere?
Raza de estompare înmoaie marginea umbrei — valori mai mari o fac să se estompeze mai treptat. Raza de extindere schimbă dimensiunea umbrei înainte de estompare — o extindere pozitivă face umbra mai mare decât elementul pe toate laturile, una negativă o micșorează. Majoritatea umbrelor de zi cu zi folosesc estompare cu extindere lăsată la 0.
De ce să folosesc rgba() în loc de o culoare hex simplă pentru umbră?
O umbră complet opacă arată dur și nerealist — umbrele reale sunt întotdeauna oarecum transparente, lăsând ce e în spatele lor să se vadă ușor. rgba() îți permite să setezi acea transparență direct, motiv pentru care acest instrument generează întotdeauna culoarea cu o valoare alfa, nu un hex solid.
Ce face cuvântul cheie inset?
Fără inset, umbra este desenată în afara marginii elementului, ca și cum elementul ar pluti deasupra paginii. Cu inset, umbra este desenată în interiorul marginii, făcând elementul să pară apăsat sau adâncit — folosit frecvent pentru stări active/apăsate ale butoanelor sau câmpuri de introducere.
Pot suprapune mai multe umbre pe același element?
Da — box-shadow CSS acceptă o listă separată prin virgulă, iar browserele le randează în ordinea dată (prima umbră este deasupra). O tehnică comună combină o umbră strânsă, mai închisă, cu una mai largă, mai moale, pentru o profunzime mai realistă decât oricare singură.
box-shadow afectează aspectul paginii sau doar aparența?
Doar aparența — box-shadow nu afectează niciodată dimensiunea elementului sau poziția elementelor din jur, chiar și cu valori mari de estompare sau extindere. Dacă umbra pare tăiată vizual, verifică overflow: hidden pe un element părinte, nu valorile umbrei în sine.