AcasăInstrumente de DesignGenerator de Gradienturi

Generator de Gradienturi

Generatorul de gradienturi CSS creează gradienturi liniare, radiale și conice din două sau trei culori, cu previzualizare live și cod CSS background gata de copiat.

Despre acest instrument

Generatorul de gradienturi CSS creează gradienturi liniare, radiale și conice din două sau trei culori, cu previzualizare live și cod CSS background gata de copiat.

Cum se folosește

  1. Alege tipul de gradient: liniar, radial sau conic.
  2. Setează unghiul cu glisorul (0–360°).
  3. Alege două culori sau bifează Use 3 colors pentru a adăuga a treia.
  4. Apasă Copy CSS și lipește regula background în foaia de stil.

Bine de știut

  • linear-gradient() amestecă culorile de-a lungul unei linii drepte stabilite printr-un unghi, unde 90deg merge de la stânga la dreapta.
  • radial-gradient(circle, …) răspândește culorile spre exterior, din centru.
  • conic-gradient(from <angle>, …) rotește culorile în jurul unui punct central, util pentru diagrame circulare și cercuri cromatice.
  • Gradienturile CSS sunt imagini randate de browser, așa că se scalează la orice dimensiune fără fișiere suplimentare.
  • Toate cele trei funcții de gradient sunt acceptate în toate browserele majore actuale.

Funcționează complet în browserul tău — nimic din ce introduci nu este încărcat sau salvat.

Întrebări frecvente

Cum fac un gradient CSS?

Folosește o funcție de gradient ca fundal, de exemplu background: linear-gradient(135deg, #1db954, #0a1628). Acest instrument scrie rândul pentru tine, pe baza culorilor și unghiului alese.

Care este diferența dintre gradienturile liniare, radiale și conice?

Gradienturile liniare schimbă culoarea de-a lungul unei linii, cele radiale pornesc dintr-un punct central, iar cele conice se rotesc în jurul unui centru, ca acele unui ceas.

Poate un gradient să aibă mai mult de două culori?

Da. Gradienturile CSS acceptă oricâte opriri de culoare. Acest generator acceptă două sau trei culori; poți adăuga manual mai multe opriri în codul CSS copiat.

Gradienturile CSS încetinesc un site?

Nu în mod vizibil. Sunt desenate de browser și nu necesită descărcarea unei imagini, așa că de obicei sunt mai ușoare decât fișierele imagine cu gradient.