Elige el tipo de degradado
Elige lineal, radial o cónico, y ajusta el ángulo de los degradados lineales y cónicos.
Generador de degradados CSS
Crea degradados CSS lineales, radiales o cónicos con hasta seis paradas de color y copia el código.
Gratis
Sin registro
Se ejecuta en tu navegador
Paradas de color
La primera parada se añade como color sólido de respaldo.
¿Necesitas colores que combinen? Usa el Generador de paletas de colores.Usos habituales
- Crea el fondo de una cabecera o de un botón
- Prueba combinaciones de colores antes de añadirlas a un diseño
- Obtén el código de un degradado sin escribirlo a mano
Cómo funciona
Cómo usar el generador de degradados CSS
Define las paradas de color
Elige hasta seis colores y mueve el control de posición de cada uno. La vista previa se actualiza al instante.
Copia el CSS
Copia la regla background. Incluye un color sólido de respaldo para navegadores muy antiguos.
FAQ
Información útil
¿Cómo uso el generador de degradados CSS?
1. Elige el tipo de degradado: Elige lineal, radial o cónico, y ajusta el ángulo de los degradados lineales y cónicos. 2. Define las paradas de color: Elige hasta seis colores y mueve el control de posición de cada uno. La vista previa se actualiza al instante. 3. Copia el CSS: Copia la regla background. Incluye un color sólido de respaldo para navegadores muy antiguos.
¿Qué navegadores admiten estos degradados?
Los degradados lineales, radiales y cónicos funcionan en todas las versiones actuales de Chrome, Edge, Firefox y Safari.
¿Por qué hay una segunda línea background?
La primera línea es un color sólido que usan en su lugar los navegadores que no admiten degradados.
¿Puedo usar el código con fines comerciales?
Sí. Puedes usar el CSS generado en cualquier proyecto.
Sigue avanzando
Más diseño y color
Generador de paletas de colores
Crea tonos claros, tonos oscuros y un color inverso a partir de un color.
Comprobador de contraste de color
Comprueba el contraste entre dos colores según WCAG.
Generador de sombras CSS (box-shadow)
Diseña un box-shadow con controles deslizantes en vivo para el desplazamiento, el desenfoque, la extensión y la opacidad, y copia el CSS.