Generator Box Shadow CSS
Generator box-shadow CSS online gratuit. Creați vizual umbre frumoase cu offset, blur, spread, culoare și inset ajustabile. Previzualizare live și copiere instantanee a codului.
Ce este CSS box-shadow?
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.
Care sunt parametrii box-shadow?
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.
Ce este cuvântul cheie inset?
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.
Ce este raza de blur?
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.
Ce este raza de spread?
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.
Cum creez mai multe umbre?
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.
Pot folosi culori RGBA pentru umbre?
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.
Cum copiez codul CSS generat?
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.
box-shadow este suportat în toate browserele?
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 afectează performanța?
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.
Care sunt cazurile comune de utilizare pentru box-shadow?
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.
Pot anima box-shadow?
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.
Cum se folosește Generator Box Shadow CSS
Proiectează umbre CSS box-shadow vizual în loc să ghicești valorile. Generatorul rulează local în browserul tău și nimic din ce introduci nu se trimite.
- Setează H-Offset și V-Offset pentru a muta umbra pe orizontală și pe verticală.
- Crește Blur pentru margini mai moi și folosește Spread pentru a mări sau micșora umbra.
- Alege un Color și ajustează Opacity pentru un aspect mai moale, mai natural.
- Bifează Inset pentru a desena umbra în interiorul elementului, nu în jurul lui.
- Copiază regula box-shadow finală din previzualizare în foaia ta de stil.
Un blur mic cu un V-Offset pozitiv mic creează chiar sub element o umbră de contact subtilă și realistă.
Instrumente conexe
- Generator de Border Radius CSS Generator vizual de border-radius CSS. Ajustați fiecare colț independent cu previzualizare în timp real și copiați codul CSS instantaneu.
- Generator Gradient CSS Creați gradienturi CSS uimitoare vizual. Generați gradienturi liniare, radiale și conice cu mai multe opriri de culoare, unghiuri și poziții. Copiați instantaneu cod CSS gata de producție.
- Generator CSS Grid Generator vizual gratuit CSS Grid cu previzualizare live. Proiectați layout-uri de grilă responsive interactiv și exportați cod CSS gata de producție.
- Generator CSS Flexbox Generator vizual CSS Flexbox cu previzualizare live. Ajustați proprietățile flex și obțineți cod CSS gata de utilizare.
- Generator de Border-radius Generator de border-radius creativ gratuit online. Trage 8 mânere sau alege o formă blob pentru a crea forme CSS organice și copiază codul instantaneu.
- Convertor Culori Convertor culori online gratuit. Convertiți instantaneu formatele HEX, RGB, HSL, HSV cu selector vizual. 100% privat, rulează în browserul dvs.
- Generator Easing CSS Generator CSS easing online gratuit. Trage punctele de control cubic-bezier pe o curbă interactivă, alege dintre 18 presetări, privește o animație cu minge în buclă și copiază funcția de timing instant.
- Generator Text Shadow CSS Generator text-shadow CSS online gratuit. Stivă mai multe straturi de umbră cu offset, blur, culoare și opacitate, încearcă presetări Neon, 3D, Retro și copiază codul CSS instant.