dexblog.ro
CSS Toate proprietățile CSS

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

Culori, fundaluri și text CSS1+ / CSS3+

Aplică una sau mai multe imagini sau degradeuri de culoare (gradiente) pe fundalul unui element.

Sintaxă 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