Umbre care nu mai vor să fie gri: Colored Shadow Penumbra

Designerii care visează la umbre colorate, dar se tem de „nerealist” — respirați adânc. Colored Shadow Penumbra este o tehnică ce permite crearea umbrelor colorate cu tranziții line (penumbra) folosind doar CSS. Fără JavaScript, fără SVG, doar pseudo-elemente și gradienti.

Secretul? Suprapunerea mai multor umbre cu culori diferite și blur variabil. Folosești filter: blur() și mix-blend-mode pentru a obține efectul de penumbră colorată. Sună a vrăjitorie, dar e doar matematică pixelică. Schimbi culoarea în CSS — umbra se actualizează instant, ca un cameleon la petrecere.

Desigur, poți folosi și imagini PNG, dar unde e distracția? Această metodă este perfectă pentru elemente accent — butoane, carduri, titluri. Totuși, nu exagera: prea multe umbre colorate pot încetini browserul, mai ales pe mobile. Folosește cu moderație, ca și cum ai pune sare în mâncare.

.shadow::after {
  content: '';
  position: absolute;
  width: 100%; height: 100%;
  background: linear-gradient(45deg, red, blue);
  filter: blur(20px);
  opacity: 0.5;
  z-index: -1;
}

Acum elementul tău aruncă o umbră violet-roșie, ca și cum ar fi iluminat de un neon. Ideal pentru landing page-uri sau interfețe de jocuri.

Comentariul echipei METABYTE: Umbrele colorate sunt cool, dar nu uita de contrast și lizibilitate. Dacă textul se pierde în umbră, utilizatorul pleacă mai repede decât spui „CSS is magic”.