Generator Box Shadow CSS

Ce este box-shadow în CSS?

Proprietatea CSS box-shadow adaugă efecte de umbră în jurul cadrului unui element. Umbrele sunt un instrument fundamental pentru crearea adâncimii, elevației și ierarhiei vizuale în designul web. O umbră bine creată poate face o cartelă să pară că plutește deasupra paginii sau să dea unui buton un aspect apăsat.

Box-shadow acceptă mai mulți parametri: decalaj orizontal, decalaj vertical, raza de estompare, raza de răspândire și culoarea. Puteți adăuga și cuvântul cheie inset pentru a crea umbre interioare. Mai multe umbre pot fi suprapuse pe un singur element prin separarea lor cu virgule, randate de la spate spre față.

Descrierea sintaxei box-shadow

Sintaxa completă este: box-shadow: [inset] offset-x offset-y [blur-radius] [spread-radius] culoare. Valorile offset-x și offset-y sunt obligatorii și definesc poziția umbrei față de element. Valorile pozitive mișcă umbra la dreapta și în jos. Blur-radius estompează marginile — valoarea 0 creează o umbră netă. Spread-radius extinde sau micșorează umbra — valorile negative creează o umbră mai strânsă.

Cum se folosește acest instrument

Ajustați glisoarele pentru decalajul orizontal, decalajul vertical, estomparea, răspândirea și culoarea. Previzualizarea se actualizează în timp real pentru a vedea exact cum va arăta umbra. Activați opțiunea inset pentru umbre interioare. Adăugați mai multe straturi de umbră pentru efecte de adâncime mai realiste. Când sunteți mulțumit, copiați codul CSS generat.

Sfaturi pentru umbre eficiente

• Folosiți umbre subtile cu opacitate redusă pentru un aspect curat, modern și elevat.
• Suprapuneți mai multe umbre pentru o adâncime mai realistă — o umbră ascuțită apropiată plus o umbră difuză moale imită iluminarea din lumea reală.
• O estompare mai mare cu un decalaj mic creează un efect de plutire moale, ideal pentru cartele și ferestre modale.
• Răspândirea negativă creează o umbră mai strânsă și mai focalizată, utilă pentru borduri subtile.
• Mențineți direcția umbrei consistentă pe întreaga pagină — sursele de lumină inconsistente arată nenatural.

Sistemul de elevație Material Design

Material Design de la Google definește niveluri de elevație de la 0dp la 24dp, fiecare cu valori specifice pentru umbră. Elevația mai mare înseamnă valori mai mari pentru estompare și decalaj. Acest sistem asigură o ierarhie vizuală consistentă în cadrul unei aplicații. Chiar dacă nu urmați Material Design, principiul utilizării unor niveluri consistente de elevație este valoros pentru orice sistem de design.

Impactul asupra performanței

Umbrele box sunt accelerate prin GPU în browserele moderne și au un impact minim asupra performanței pentru utilizarea tipică. Totuși, razele de estompare foarte mari (50px+) pe multe elemente simultan pot cauza scăderea frame-rate-ului în timpul animațiilor. Dacă trebuie să animați umbre, luați în considerare utilizarea transform: scale() pentru a mări un pseudo-element cu o umbră statică în loc să animați valorile umbrei direct.

Întrebări frecvente

Care este diferența dintre box-shadow și drop-shadow?

box-shadow se aplică pe caseta dreptunghiulară a elementului, inclusiv padding-ul și bordura. Funcția filter: drop-shadow() urmează forma reală a elementului, inclusiv zonele transparente din imagini. Folosiți drop-shadow pentru elemente non-dreptunghiulare, cum ar fi pictogramele sau imaginile PNG cu transparență.

Pot folosi box-shadow pentru a crea borduri?

Da. Un box-shadow cu estompare zero și o răspândire pozitivă acționează ca o bordură care nu afectează aspectul. Această tehnică este utilă când aveți nevoie de o bordură vizuală fără a schimba dimensiunile elementului, de exemplu în stări hover.