background-image (gradient liniar și radial) în CSS

background-image: url("model.png");
background-image: linear-gradient(to right, #2563eb, #9333ea);
background-image: radial-gradient(circle, #e34f26, #b91c1c);

Ce face background-image (gradient liniar și radial)

background-image permite încărcarea fișierelor grafice de fundal prin funcția url() sau generarea nativă a degradeurilor spectaculoase prin linear-gradient() și radial-gradient().

Degradeurile CSS sunt considerate imagini și nu au nevoie de fișiere grafice externe: se randează instantaneu la rezoluție perfectă, fără a încetini site-ul.

Valori uzuale

Valoare	Descriere
url("cale")	Calea către fișierul imagine extern.
linear-gradient()	Degradeu liniar într-o direcție (to right, to bottom, 45deg).
radial-gradient()	Degradeu circular sau eliptic dinspre centru spre exterior.
none	Elimină imaginea de fundal.

Exemple

Exemplul 1: Fundal modern cu gradient de la albastru la mov

Creează un aspect modern fără imagini grele.

.hero-gradient {
  background-image: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
  color: #ffffff;
  padding: 60px 20px;
  text-align: center;
}

Efect vizual în browser

O zonă mare cu fundal fluid în degradeu înclinat la 135 de grade, trecând lin de la albastru intens la violet, cu text alb centrat.

Greșeli frecvente

• Omiterea unei culori de rezervă (background-color) sub imaginea de fundal; dacă imaginea nu se descarcă sau utilizatorul are conexiune lentă, textul poate deveni invizibil.

Comenzi înrudite

• background-color: Setează culoarea solidă sau semi-transparentă a fundalului unui element.
• background-size, position și repeat: Controlează redimensionarea, centrarea și repetarea imaginilor de fundal.