Generador de degradado CSS con varias paradas

Componga un degradado CSS con tantas paradas de color como necesite, un tipo (lineal o radial) y un ángulo ajustable, con vista previa en directo. El código se calcula y se muestra íntegramente en su navegador.

0%
50%
100%
Código CSS

Cómo funciona

Con más de dos colores, un degradado CSS gana mucha riqueza visual: tres o más paradas permiten crear transiciones tipo atardecer, efecto holográfico o fondos modernos para una landing page. Esta herramienta le permite añadir, posicionar (en porcentaje) y eliminar libremente cada parada de color, con una vista previa actualizada en tiempo real y el código CSS exacto para copiar.

¿Cuál es la diferencia entre un degradado lineal y uno radial?

El degradado lineal (linear-gradient) avanza en línea recta según un ángulo definido, mientras que el degradado radial (radial-gradient) parte de un punto central y se extiende en círculo hacia el exterior, un efecto que se usa a menudo para halos de luz o fondos circulares de sección.

¿A qué corresponde la posición de una parada de color?

La posición (en porcentaje) indica en qué punto del degradado el color alcanza su plena intensidad antes de empezar a fundirse con la parada siguiente. Acercar dos paradas crea una transición más marcada entre sus colores, mientras que separarlas produce un fundido más progresivo.

Procesamiento 100% local: la composición del degradado y la generación del código se realizan directamente en su navegador, sin enviar ningún dato.