Cum funcționează proprietatea box-shadow în CSS3
Proprietatea box-shadow adaugă efecte de umbră în jurul cadrului unui element. Spre deosebire de text-shadow (care decupează conturul glifelor de text), box-shadow respectă colțurile rotunjite definite prin border-radius.
Sintaxa completă a proprietății:
/* Sintaxa formală */
box-shadow: [inset] <offset-x> <offset-y> <blur-radius> <spread-radius> <color>;- offset-x (obligatoriu): Distanța pe orizontală. Valori pozitive deplasează umbra spre dreapta; valori negative o deplasează spre stânga.
- offset-y (obligatoriu): Distanța pe verticală. Valori pozitive împing umbra în jos; valori negative o mută în sus.
- blur-radius (opțional): Raza de estompare. Cu cât valoarea este mai mare, cu atât umbra devine mai difuză și mai mare. Nu poate fi negativă.
- spread-radius (opțional): Rază de expandare. Valori pozitive măresc dimensiunea umbrei dincolo de marginea elementului; valori negative o comprimă.
- color: Culoarea umbrei. Se recomandă utilizarea formatului
rgba()sauhsla()pentru a controla transparența fără a întuneca opacitatea elementului în sine. - inset (opțional): Comută modul de randare, plasând umbra în interiorul cadrului (util pentru câmpuri de formular bifate, butoane apăsate sau efecte de tip „gaură săpată” / neumorphism).
Tehnica umbrelor multi-strat (Layered Shadows)
Pentru a crea umbre de un realism fotografic excepțional, poți combina mai multe umbre separate prin virgulă. Primul strat oferă o umbră ascuțită și subtilă lângă margine, iar al doilea strat oferă o difuzie largă de adâncime:
/* Exemplu de umbră compusă ultra-netedă (Stripe / Apple style) */
.card-premium {
box-shadow:
0 1px 3px rgba(0, 0, 0, 0.06),
0 8px 24px -4px rgba(0, 0, 0, 0.12);
}Sisteme de Elevare (Z-Index Vizual) în Design Systems
În sistemele profesionale de design (precum Material Design, Tailwind sau sisteme create în Figma), umbrele nu sunt alese la întâmplare, ci sunt structurate pe niveluri de elevație pentru a semnaliza ierarhia interfeței:
| Nivel Elevație | Caz de Utilizare | Cod Recomandat CSS |
|---|---|---|
| Elevation 1 (Subtil) | Carduri statice, tabele, elemente de listă | 0 1px 2px 0 rgba(0, 0, 0, 0.05) |
| Elevation 2 (Mediu) | Carduri la hover, butoane primare, meniuri dropdown | 0 4px 12px -2px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04) |
| Elevation 3 (Înalt) | Panouri laterale (drawers), popover-uri, toast-uri | 0 12px 24px -4px rgba(0, 0, 0, 0.12), 0 4px 8px -2px rgba(0, 0, 0, 0.06) |
| Elevation 4 (Modal) | Ferestre modale (dialog), lightbox, imagini mărite | 0 24px 48px -12px rgba(0, 0, 0, 0.25) |
Box-Shadow vs. Filter: drop-shadow() — Când să alegi fiecare
O greșeală comună a dezvoltatorilor este încercarea de a aplica box-shadow pe imagini transparente (PNG) sau grafică vectorială SVG cu forme complexe:
- box-shadow: Se aplică strict pe cutia dreptunghiulară a elementului (sau rotunjită conform
border-radius). Dacă aplicibox-shadowpe un icon stea transparent, umbra va apărea ca un dreptunghi în jurul stelei! - filter: drop-shadow(): Recunoaște canalul alfa (transparența) pixelilor și conturează precis silueta vizuală reală a imaginii, iconiței SVG sau textului decupat.
Optimizare de Performanță: Animații fără Sacadare (Jank)
Proprietatea box-shadow este o operație costisitoare pentru motorul de randare. Modificarea unui box-shadow în cadrul unei animații sau la starea :hover forțează browserul să execute un ciclu de Repaint la fiecare cadru:
box-shadow! În schimb, plasează umbra puternică pe un pseudo-element ::after absolut cu opacity: 0 și animează doar opacity și transform: translateY(-4px). Deoarece transparența și transformările sunt compuse direct pe placa video (GPU), animația va rula la 60–120 FPS fără blocaje ale procesorului.
Întrebări Frecvente (FAQ) despre Box-Shadow
În loc de rgba(0,0,0, 0.5), folosește o nuanță închisă din culoarea de bază a fundalului tău (de exemplu un albastru foarte închis precum rgba(14, 42, 71, 0.15) pe o pagină cu temă albastră). Acest truc oferă un aspect organic și mult mai calitativ.
Un spread negativ micșorează perimetrul umbrei înainte ca aceasta să fie blurată. Astfel, umbra nu mai "sângerează" inestetic în lateral și pare proiectată natural exact dedesubtul obiectului.
Suportul este de 100% în toate browserele moderne de desktop și mobile (Chrome, Edge, Firefox, Safari, iOS, Android). Prefixul -webkit- nu mai este necesar în proiectele moderne de producție.