Convertor gratuit

Gradient CSS Generator

Generați vizual gradienți CSS cu previzualizare live. Creați degrade liniari, radiali și conici cu opriri de culoare personalizate - libere și pe partea clientului.

Previzualizare live
Ieșire CSS
.element {
  background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%);
}
Gradient Type
Unghiul (90deg)
90°180°270°360°
Color Stops
#6366f10%
#ec4899100%

Despre acest instrument

Creați degrade CSS liniari și radiali frumoși cu un editor vizual. Alegeți culori, reglați opririle, schimbați direcția sau unghiul și vedeți actualizarea previzualizării live în timp real. Copiați codul CSS generat - inclusiv prefixele de furnizor pentru browsere mai vechi - și inserați-l direct în foaia de stil.

Cum se utilizează

  1. Alegeți tipul de gradient: liniar sau radial.
  2. Adăugați opriri de culoare făcând clic pe bara de gradient și selectând culori.
  3. Reglați unghiul de gradient (liniar) sau poziția (radial) folosind comenzile.
  4. Copiați codul CSS generat din panoul de ieșire.

Întrebări frecvente

Gradienții CSS funcționează în toate browserele?
Gradienții CSS moderni (gradient liniar, gradient radial) sunt acceptați în toate browserele actuale, inclusiv Chrome, Firefox, Safari și Edge. Instrumentul poate genera opțional prefixe -webkit- pentru versiunile mai vechi de browser.
Pot crea degradeuri multicolore?
Da. Adăugați oricâte opriri de culoare aveți nevoie. De asemenea, puteți regla poziția fiecărei opriri pentru a controla unde se amestecă culorile. Acest lucru permite gradiente complexe de curcubeu, apus de soare sau personalizate.
Care este diferența dintre gradienții liniari și radiali?
Gradienții liniari tranzitează culorile de-a lungul unei linii drepte (de sus în jos, de la stânga la dreapta, în diagonală sau în orice unghi). Gradienții radiali tranzitează culorile spre exterior de la un punct central într-o formă circulară sau eliptică.
Pot folosi gradientul ca fundal pentru text?
Da. Folosiți background-clip: text cu -webkit-text-fill-color: transparent pentru a aplica gradientul textului. CSS-ul generat oferă definiția gradientului - combinați-o cu aceste proprietăți pentru textul gradient.