Generator Box Shadow CSS

CSS box-shadow este o proprietate CSS care adaugă efecte de umbră în jurul cadrului unui element. Vă permite să creați umbre exterioare, umbre interioare și mai multe straturi de umbră specificând offset, raza de blur, raza de spread și valori de culoare.

Proprietatea box-shadow acceptă mai multe valori: offset orizontal (X), offset vertical (Y), rază de blur, rază de spread, culoare și cuvântul cheie opțional inset. Puteți, de asemenea, să specificați mai multe umbre separate prin virgule.

Cuvântul cheie inset schimbă umbra dintr-o umbră exterioară (umbră exterioară) într-o umbră interioară. Când este specificat inset, umbra este desenată în interiorul marginii elementului în loc de exterior, creând un efect de inserție.

Raza de blur determină cât de neclară este marginea umbrei. O valoare de 0 creează o margine ascuțită și solidă. Valorile mai mari creează o umbră mai difuză și mai moale care se extinde mai departe de element.

Raza de spread extinde sau contractă dimensiunea umbrei. Valorile pozitive fac umbra mai mare decât elementul, în timp ce valorile negative o fac mai mică. Aceasta afectează umbra înainte de aplicarea blur-ului.

Puteți crea mai multe umbre separând fiecare definiție de umbră cu o virgulă. Fiecare umbră poate avea valori diferite de offset, blur, spread și culoare. Umbrele sunt aplicate în ordinea în care sunt declarate, prima umbră fiind sus.

Da, puteți folosi orice format de culoare CSS, inclusiv RGBA, HSLA, HEX sau culori numite. RGBA și HSLA sunt deosebit de utile pentru crearea de umbre semi-transparente care se îmbină natural cu fundalurile.

Pur și simplu faceți clic pe butonul "Copiază cod" din interfața generatorului. Codul CSS va fi copiat în clipboard și poate fi lipit direct în foaia de stiluri sau fișierul HTML.

Da, box-shadow este suportat în toate browserele moderne, inclusiv Chrome, Firefox, Safari, Edge și Opera. Face parte din CSS3 din 2011 și are o compatibilitate excelentă cu browserele.

box-shadow are un impact minim asupra performanței browserelor moderne. Cu toate acestea, utilizarea mai multor umbre complexe cu rază de blur mare pe multe elemente poate afecta performanța de redare, în special pe dispozitivele mobile.

Utilizările comune includ crearea de efecte de ridicare a cardurilor, adăugarea de adâncime butoanelor, crearea de câmpuri de formular inset, implementarea umbrelor material design și adăugarea separării vizuale între elementele suprapuse.

Da, box-shadow poate fi animat folosind tranziții sau animații CSS. Cu toate acestea, animarea box-shadow poate fi intensivă din punct de vedere al performanței. Pentru o performanță mai bună, luați în considerare utilizarea pseudo-elementelor cu tranziții de opacitate.