Generador de degradados CSS
Diseña degradados CSS lineales, radiales y cónicos con paradas de color arrastrables, ángulos, modo repetido e interpolación OKLCH. Vista previa en vivo y código.
Ajustes predefinidos
Ajustes del degradado
Paradas de color
Haz clic en la barra para añadir una parada y arrastra los controles para moverlas. Los colores admiten hex, rgb(), hsl() u oklch().
Vista previa
background: linear-gradient(90deg, #00c9ff 0%, #92fe9d 100%);
Herramientas Relacionadas
Ver Todas¿Qué es Generador de degradados CSS?
Un editor completo de degradados CSS compatible con linear-gradient, radial-gradient y conic-gradient, sus variantes repetidas y la interpolación de color moderna (in oklab / in oklch). Las paradas de color se pueden arrastrar sobre una barra o escribir con exactitud, y los colores aceptan hex, rgb(), hsl() u oklch().
Cómo usar Generador de degradados CSS
- Elige un ajuste predefinido o un Tipo: Lineal, Radial o Cónico.
- Ajusta el Ángulo (lineal), el Ángulo inicial (cónico) o la Forma, el Tamaño y la posición del centro (radial/cónico).
- Edita las Paradas de color: haz clic en la barra para añadir una parada, arrastra los controles para moverlas o escribe un color y una posición para cada una.
- Si quieres, marca Degradado repetido y elige un Espacio de color de interpolación (OKLab u OKLCH).
- Copia el código CSS.
Ejemplo
Linear, angle 45°, stops #00c9ff at 0% and oklch(70% 0.2 150) at 80%, interpolation OKLCH
background: linear-gradient(45deg, #00c9ff 0%, oklch(70% 0.2 150) 80%); background: linear-gradient(in oklch 45deg, #00c9ff 0%, oklch(70% 0.2 150) 80%);
Cuándo usar Generador de degradados CSS
Úsalo para fondos, botones, secciones de cabecera y rayas o ruedas de color hechas con degradados. Para fondos suaves «de malla» con varios puntos usa el Generador de degradados de malla; para efectos fotográficos en imágenes usa filtros CSS.
Cómo funciona Generador de degradados CSS
Las paradas se ordenan por posición y se escriben como color posición%. Los degradados lineales usan un ángulo en grados, los radiales shape [size] at x% y% y los cónicos from angle at x% y%. Al hacer clic en la barra se inserta una parada cuyo color se interpola a partir de sus vecinas. Si se elige un espacio de interpolación, la herramienta genera dos declaraciones: primero una alternativa sRGB normal y después el mismo degradado con in oklch (o in oklab), para que los navegadores antiguos mantengan un degradado funcional y los modernos usen la mezcla perceptual más suave.
Casos de Uso Comunes
- Fondos de cabecera y de secciones
- Botones e insignias con degradado
- Ruedas de color y visuales tipo gráfico circular con degradados cónicos
- Fondos a rayas con degradados repetidos
- Degradados OKLCH suaves que evitan el centro gris de las mezclas sRGB
Preguntas Frecuentes
¿Por qué hay dos líneas de background con interpolación OKLCH?
Los navegadores que no entienden in oklch descartan esa declaración por completo. La primera línea es un degradado sRGB normal que pueden usar; los navegadores compatibles aplican la segunda.
¿Qué cambia la interpolación OKLCH?
Los colores se mezclan en un espacio perceptualmente uniforme, así que los degradados entre colores saturados se mantienen vivos en lugar de pasar por un centro gris o apagado.
¿Puedo usar transparencia?
Sí. Usa rgba(), hsl() u oklch() con un valor alfa (por ejemplo, rgba(0, 0, 0, 0.5)) como color de una parada.
¿Cómo hago rayas duras?
Pon dos paradas en la misma posición (p. ej., amarillo 5 % y negro 5 %) y activa Degradado repetido, como en el ajuste Rayas.