Generator de gradient CSS

Generatorul creează gradiente CSS liniare și radiale din punctele de culoare pe care le controlezi. Vezi imediat rezultatul și primești o declarație background gata de lipit. Mută punctele de-a lungul barei, setează unghiul sau forma, iar codul CSS se actualizează instantaneu.

Totul rulează în browserul tău. Culorile și setările nu sunt încărcate, iar rezultatul poate fi copiat și folosit offline.

Un gradient liniar îmbină culorile de-a lungul unei linii drepte. Unghiul îi stabilește direcția: 0 grade în sus, 90 de grade spre dreapta și 180 de grade în jos. Un gradient radial pornește din centru și se extinde sub forma unui cerc sau a unei elipse.

Ambele sunt valori CSS standard, scrise ca linear-gradient() și radial-gradient(), și folosesc aceeași listă de puncte de culoare. Schimbarea tipului păstrează culorile și modifică doar felul în care acestea se distribuie.

Fiecare punct asociază o culoare unei poziții între 0% și 100%. Gradientul face trecerea între punctele învecinate, iar poziția fiecăruia controlează zona în care culoarea este mai intensă și viteza trecerii spre următoarea.

Adaugă câte puncte ai nevoie pentru un gradient multicolor. Trage-le pentru a regla amestecul sau apasă pe bară pentru a introduce unul nou în poziția dorită. Un gradient are nevoie de cel puțin două puncte.

Copiază codul generat și folosește-l ca fundal pentru orice element, de exemplu o secțiune, un card sau un buton. Browserele moderne acceptă linear-gradient() și radial-gradient() fără prefixe de furnizor.

Un gradient este o valoare de imagine și poate fi folosit oriunde este acceptată o imagine de fundal. Îl poți așeza peste o culoare simplă ca alternativă sau poți reutiliza aceleași puncte într-o versiune liniară și una radială pentru un aspect consecvent.