Generador de degradados CSS
Crea degradados CSS lineales o radiales con 2–10 paradas de color. Ajusta ángulos, posiciones y transparencias, usa preajustes o invierte las paradas y copia o descarga la hoja de estilos.
De 2 a 10 paradas, ordenadas por porcentaje. Posiciones iguales crean bordes duros y conservan su orden. La transparencia se muestra sobre damero. Canales sRGB de 8 bits; RGBA conserva el alfa decimal.
Tres pasos sencillos.
- Elige lineal o radial y empieza con un preajuste o tus colores.
- Edita colores y porcentajes; añade, elimina o invierte paradas.
- Revisa la vista previa y copia el fondo CSS o descarga la hoja de estilos.
Lo que debes saber.
Admite nombres CSS estándar y HEX/RGB/HSL numéricos, con posiciones de 0 a 100%. Las paradas se ordenan por posición; las iguales conservan el orden de la lista y pueden crear bordes duros. El degradado radial es un círculo centrado. La interpolación del navegador y las pantallas pueden variar; no es un flujo de impresión.
Cómo protegemos tu privacidad →Preguntas frecuentes.
¿Puede terminar en transparencia?
Sí. Usa alfa, como #294C3900 o rgba(41,76,57,0). El tablero muestra las zonas transparentes.
¿Qué hace invertir?
Invierte la lista y cambia cada posición a 100 menos su porcentaje original. También invierte el orden de los colores en los bordes duros.