Generator de umbre box-shadow
Reglează umbra cu glisoarele, adaugă straturi pentru o umbră mai naturală și copiază codul CSS.
Setări
Previzualizare
Previzualizare
Ce face
Scrie proprietatea box-shadow din CSS Backgrounds 3: pentru fiecare strat, deplasarea pe orizontală și pe verticală, estomparea (cât de moale e marginea), întinderea (cât crește sau se micșorează umbra față de element) și culoarea, plus inset pentru o umbră în interiorul elementului.
Straturile se despart prin virgulă; primul e desenat deasupra celorlalte. Poți combina, de exemplu, un strat mic, aproape de element, cu unul mare și estompat; Altă umbră trece prin câteva exemple de pornire, printre care și unul așa.
Culoarea umbrei
Când opacitatea e sub 100%, culoarea se scrie cu rgba(), ca opacitatea să fie în cod: negru cu 35% opacitate devine rgba(0, 0, 0, 0.35). O umbră colorată, de exemplu în culoarea butonului, dă un efect de lumină; pentru o culoare și nuanțele ei, vezi convertorul de culori.
Cardul și fundalul previzualizării se pot schimba, ca să vezi umbra pe culorile paginii tale. Pentru colțuri rotunjite, folosește generatorul border-radius.
Întrebări frecvente
Care e diferența dintre estompare și întindere?
Estomparea face marginea umbrei moale: cu 0, marginea e netă. Întinderea mărește umbra în toate direcțiile, iar o valoare negativă o micșorează; împreună cu o deplasare în jos, umbra se vede apoi mai mult sub element decât pe laterale.
Merge și pentru text?
Nu: pentru text CSS are proprietatea text-shadow, care nu are întindere și nici inset.