Generador de degradados CSS
Crea un degradado lineal o radial de forma visual con cualquier número de puntos de color, luego copia el CSS.
Puntos de color
Cómo funciona
Cada punto de color es un objeto con un color y una posición de 0 a 100. Con cada cambio, los puntos se ordenan por posición antes de generar el resultado, así que puedes escribirlos en cualquier orden y la salida sigue siendo válida. Luego se unen en linear-gradient(<ángulo>deg, ...) o radial-gradient(circle, ...) según el tipo elegido. Esa misma cadena se aplica como background de la vista previa y se imprime como resultado, así que la vista previa está renderizada por tu propio navegador con el mismo CSS que copias, no una aproximación.
Si un degradado entre dos colores saturados se ve apagado en el centro, no es un fallo de la herramienta: los navegadores interpolan degradados en el espacio sRGB por defecto, y la línea recta entre ciertos pares de colores (azul a amarillo es el caso clásico) pasa por un gris desaturado. La solución es añadir un punto intermedio con el color vivo que realmente quieres, algo que esta herramienta hace fácil.
Todo el degradado se construye y aplica en el JavaScript de esta página; elegir colores y mover el ángulo no genera ninguna solicitud de red, algo que puedes comprobar tú mismo en la pestaña Red de las herramientas de desarrollador.
Preguntas frecuentes
¿Puedo añadir más de dos colores?
Sí, haz clic en «Añadir punto de color» tantas veces como quieras. Cada punto tiene su propio color y porcentaje de posición, así que puedes crear degradados con varios colores, no solo de dos tonos.
¿Cuál es la diferencia entre lineal y radial?
Los degradados lineales transicionan en línea recta con el ángulo que definas. Los degradados radiales transicionan hacia afuera desde un punto central en forma de círculo, el ángulo no aplica a estos.
¿Se envía esto a algún sitio?
No, el degradado se crea y se previsualiza por completo en el motor CSS de tu navegador. No se sube nada.