Generador de degradats CSS

Aquest generador de degradats CSS crea degradats lineals i radials a partir de parades de color que controles, amb una vista prèvia en directe i una declaració de fons llesta per enganxar. Arrossega les parades al llarg de la barra, estableix l'angle o la forma i el CSS s'actualitzarà a l'instant.

Tot s'executa al teu navegador a partir dels colors i la configuració que triïs, de manera que no es puja res i pots copiar el resultat i utilitzar-lo sense connexió.

Un degradat lineal combina colors al llarg d'una línia recta i l'angle estableix la seva direcció: 0 graus cap amunt, 90 graus cap a la dreta, 180 graus cap avall. Un degradat radial es barreja cap a fora des del centre, com un cercle o una el·lipse.

Tots dos són valors CSS estàndard, escrits com a linear-gradient() i radial-gradient(), i utilitzen la mateixa llista de parades de color. Canviar el tipus manté els colors i només canvia la manera com s'estenen.

Cada parada de color és un color col·locat en una posició del 0% al 100%. El degradat es barreja suaument entre les parades veïnes, de manera que la posició d'una parada controla on arriba el seu color i la rapidesa amb què s'esvaeix a la següent.

Afegeix tantes parades com necessitis per crear degradats multicolors, arrossega-les per afinar la combinació o fes clic a la barra per afegir una parada nova on vulguis. Dues parades són el mínim que necessita un degradat.

Copia el codi generat i enganxa'l com a fons de qualsevol element, com ara una secció, una targeta o un botó. Els navegadors moderns admeten linear-gradient() i radial-gradient() sense prefix de proveïdor, de manera que el valor funciona tal qual.

Com que un degradat és només un valor, també pots utilitzar-lo a qualsevol lloc on s'espera una imatge de fons, col·locar-lo sobre un color sòlid com a alternativa o reutilitzar les mateixes parades en una versió lineal i radial per obtenir un aspecte coherent.