Generator de gradient CSS
Alege tipul, unghiul și culorile: gradientul apare pe loc, iar codul CSS e gata de copiat.
Setări
Culori
Previzualizare
Ce face
Scrie valoarea pentru background cu una dintre funcțiile de gradient din CSS: linear-gradient() (culorile se schimbă de-a lungul unei linii), radial-gradient() (pornesc dintr-un centru, în cerc sau elipsă) sau conic-gradient() (se rotesc în jurul unui centru). Cu Se repetă primești varianta repeating-, care reia culorile până umple tot.
Unghiul se măsoară ca în CSS Images: 0° în sus, 90° spre dreapta, în sensul acelor de ceasornic. La gradientul conic, e unghiul de la care pornesc culorile.
Culorile
Fiecare culoare are o poziție, de la 0% la 100%. Poți alege culoarea din paletă sau o poți scrie în orice format CSS, de exemplu rgb(255 122 24 / 50%) pentru transparență; o păstrăm exact cum ai scris-o, iar browserul o verifică. În cod, culorile apar în ordinea pozițiilor.
Altă combinație trece prin câteva exemple de pornire. Pentru o culoare cu nuanțele ei, folosește convertorul de culori.
Codul rămâne la tine
Gradientul se construiește în browserul tău; nu trimitem nimic nicăieri.
Întrebări frecvente
Funcționează în toate browserele?
Previzualizarea folosește chiar codul afișat, deci ce vezi e ce face browserul tău. linear-gradient() și radial-gradient() vin din CSS Images 3, conic-gradient() din CSS Images 4, un modul mai nou.
Cum fac un gradient cu margini nete?
Pune două culori la aceeași poziție: de exemplu roșu la 50% și albastru la 50%. CSS Images 3 spune că atunci culoarea se schimbă brusc în acel punct, fără trecere.