Generator gradient CSS (background)

Exemple de gradient CSS

Variante gata făcute: copiază codul direct sau deschide exemplul în generator și modifică-l după nevoie.

Albastru spre violet Gradientul clasic pentru antete și butoane mari.

.element {
  background-color: #2563eb;
  background-image: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
}

Apus Trei culori calde; poziția de mijloc mută centrul trecerii.

.element {
  background-color: #f97316;
  background-image: linear-gradient(120deg, #f97316 0%, #ec4899 55%, #7c3aed 100%);
}

Ocean De sus în jos, din albastru deschis în bleumarin.

.element {
  background-color: #0ea5e9;
  background-image: linear-gradient(180deg, #0ea5e9 0%, #1e3a8a 100%);
}

Piersică Culori pastelate, bune ca fundal pentru secțiuni cu text închis.

.element {
  background-color: #fde68a;
  background-image: linear-gradient(90deg, #fde68a 0%, #fca5a5 100%);
}

Spot radial Un punct luminos care se stinge în întuneric.

.element {
  background-color: #fde68a;
  background-image: radial-gradient(circle at 30% 30%, #fde68a 0%, #f59e0b 35%, #0f172a 100%);
}

Roata culorilor Gradient conic; ultima culoare e aceeași cu prima, ca cercul să se închidă fără tăietură.

.element {
  background-color: #ef4444;
  background-image: conic-gradient(from 0deg at 50% 50%, #ef4444 0%, #eab308 25%, #22c55e 50%, #3b82f6 75%, #ef4444 100%);
}

Dungi diagonale Două culori cu poziții egale fac o linie dreaptă; repeating repetă modelul.

.element {
  background-color: #1e293b;
  background-image: repeating-linear-gradient(45deg, #1e293b 0%, #1e293b 5%, #334155 5%, #334155 10%);
}

Umbră peste poză Gradient de la transparent la negru, pus peste o imagine ca textul de jos să se citească.

.element {
  background-color: #0f172a;
  background-image: linear-gradient(180deg, rgba(15, 23, 42, 0) 40%, rgba(15, 23, 42, 0.85) 100%);
}

Cum folosești generatorul de gradient

Alege tipul: linear, radial sau conic.
La Culori (opriri), apasă pe o culoare ca s-o modifici, sau pe + Culoare ca să adaugi una nouă. Fiecare culoare are o poziție între 0% și 100%.
Setează unghiul (linear și conic) sau centrul (radial și conic).
Bifează Repetă modelul pentru dungi și alte modele repetitive.

linear-gradient

Culorile trec de-a lungul unei linii. Unghiul 0deg merge de jos în sus, 90deg de la stânga la dreapta, iar 180deg de sus în jos.

.hero {
  background-image: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
}

radial-gradient și conic-gradient

radial-gradient pornește dintr-un punct și se extinde în cerc sau elipsă. conic-gradient rotește culorile în jurul unui punct, ca acele unui ceas; e bun pentru diagrame circulare și roți de culori.

.spot {
  background-image: radial-gradient(circle at 30% 30%, #fde68a 0%, #0f172a 100%);
}
.roata {
  background-image: conic-gradient(from 0deg at 50% 50%, red, yellow, lime, blue, red);
}

Dungi cu repeating-linear-gradient

Când două culori au aceeași poziție, trecerea dintre ele devine o linie dreaptă, fără estompare. Repetat, rezultatul sunt dungi:

.dungi {
  background-image: repeating-linear-gradient(45deg, #1e293b 0 10px, #334155 10px 20px);
}

Întrebări frecvente

De ce generatorul pune și background-color?

Ca rezervă: dacă gradientul nu se încarcă sau nu e suportat, elementul are măcar prima culoare. Gradientul este o imagine, deci stă deasupra culorii de fundal.

Pot pune un gradient peste o poză?

Da. background-image acceptă mai multe straturi, despărțite prin virgulă: linear-gradient(rgba(0,0,0,.5), transparent), url(poza.jpg). Primul strat stă deasupra.

Cum fac textul cu gradient?

Pune gradientul ca fundal pe text, apoi background-clip: text și color: transparent.