Generador de degradados CSS
Da forma a un degradado de manera visual y copia un CSS que funciona en todos los navegadores modernos.
Sellado en este dispositivo
Funciona en tu navegador. No se sube nada.
Sellado
Vista previa
Paradas de color
Arrastra las paradas, o selecciona una y usa las flechas. Haz clic en la barra para añadir una parada.
Ajustes
OKLCH y OKLab evitan la zona gris y apagada que aparece en el centro de algunos degradados. Se incluye una versión estándar para navegadores antiguos.
Código CSS
Cómo funciona
-
Elige un tipo
Elige un degradado lineal, radial o cónico, o parte de un ajuste predefinido, y define su ángulo o su centro.
-
Edita los colores
Arrastra las paradas de color por la barra, haz clic en ella para añadir más y cambia el color y la posición de cada parada.
-
Copia el CSS
Copia el código generado y pégalo en tu hoja de estilos como fondo.
Preguntas frecuentes
¿Qué diferencia hay entre los degradados lineales, radiales y cónicos?
Un degradado lineal cambia de color a lo largo de una línea recta, con el ángulo que elijas. Un degradado radial se expande desde un punto central en forma de círculo o elipse. Un degradado cónico gira alrededor de un punto central, como las agujas de un reloj, algo muy útil para círculos cromáticos y gráficos circulares.
¿El CSS generado funciona en todos los navegadores?
Los degradados lineales, radiales y cónicos funcionan en todos los navegadores actuales. Si eliges la mezcla OKLCH u OKLab, el código incluye además una línea estándar al principio, para que los navegadores antiguos sigan mostrando un degradado.
¿Por qué mi degradado se ve gris en el centro?
Al mezclar dos colores muy distintos en el espacio estándar sRGB, a menudo se pasa por un gris turbio. Cambia la mezcla a OKLCH u OKLab: los colores se combinan tal como los percibe el ojo, así que el centro sigue siendo luminoso.
¿Puedo usar colores transparentes?
Sí. Escribe un color con transparencia, como rgb(52 66 217 / 0.4) o #3442d966, en el campo de color de una parada. Es ideal para capas superpuestas sobre imágenes.
¿Cuántas paradas de color puedo añadir?
Todas las que necesites. Cada parada se puede mover con el ratón, con el dedo o con las flechas, y eliminar siempre que queden al menos dos.