Generator text cu gradient și contur CSS

Exemple de text cu gradient

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

Titlu cu gradient Varianta de bază: fundal tăiat după litere și text transparent.

h1 {
  display: inline-block;
  background-image: linear-gradient(90deg, #2563eb, #db2777);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

Gradient care curge Prima culoare se repetă la final și fundalul e de două ori mai lat, deci bucla nu are salt.

.curcubeu {
  background-image: linear-gradient(90deg, #ef4444, #eab308, #3b82f6, #ef4444);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: curge 3s linear infinite;
}

@keyframes curge {
  to { background-position: 200% center; }
}

Doar contur Literele sunt goale; se vede numai conturul.

.contur {
  color: transparent;
  -webkit-text-stroke: 2px #0f172a;
  font-weight: 900;
}

Gradient doar la hover Linkul are culoare normală, iar gradientul apare când treci cu mouse-ul.

.link-special:hover,
.link-special:focus-visible {
  background-image: linear-gradient(90deg, #f97316, #db2777);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

Rezervă pentru browsere vechi Unde background-clip: text nu există, textul rămâne colorat simplu, nu transparent.

.titlu { color: #2563eb; }

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .titlu {
    background-image: linear-gradient(90deg, #2563eb, #db2777);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

Cum folosești generatorul de text cu gradient

Scrie textul și alege mărimea și grosimea fontului.
La umplerea literelor alege Gradient sau Doar contur.
Pentru gradient, alege 2 sau 3 culori și unghiul; bifează Gradient animat dacă vrei ca culorile să curgă prin text.
Adaugă contur (grosime și culoare) și, la textul doar cu contur, strălucire. Copiază codul. Totul rulează în browser; nu se trimite nimic către server.

Cum se face textul cu gradient

Gradientul este fundalul elementului. background-clip: text îl taie după forma literelor, iar color: transparent face literele transparente, ca să se vadă fundalul prin ele. Varianta fără prefix merge în browserele actuale; -webkit-background-clip: text rămâne pentru versiunile mai vechi.

.text-gradient {
  display: inline-block;
  background-image: linear-gradient(90deg, #2563eb, #db2777);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

display: inline-block face ca gradientul să fie cât textul, nu cât tot rândul. Pentru animație, gradientul se repetă (prima culoare apare și la final), fundalul primește background-size: 200% auto, iar @keyframes mută background-position, așa că bucla nu are salt.

Conturul

-webkit-text-stroke funcționează cu prefix în toate browserele mari, inclusiv Firefox. Conturul este desenat pe marginea literei, pe jumătate în interior, așa că un contur gros subțiază literele. paint-order: stroke fill ar pune conturul sub umplere, dar suportul pentru textul HTML diferă între browsere și nu ajută la gradient, care vine din fundal. Pentru contururi groase alege un font mai gros.

Întrebări frecvente

Textul cu gradient se poate selecta și copia?

Da, este text obișnuit. Cititoarele de ecran îl citesc normal, iar motoarele de căutare îl văd ca pe orice titlu.

De ce nu se vede nimic când aleg doar contur?

La doar contur, literele sunt transparente și se vede numai conturul. Dacă grosimea e foarte mică sau culoarea e ca fundalul, textul pare dispărut; mărește grosimea sau schimbă culoarea.