Generador de Degradados CSS — Degradados Lineales y Radiales

Generador de Degradados CSS — Diseñe Degradados Visualmente

Cree impresionantes degradados CSS con un editor visual en vivo. Añada tantas paradas de color como desee, elija degradados lineales, radiales o cónicos, ajuste el ángulo y copie el código CSS listo para usar. Perfecto para fondos, botones, tarjetas y secciones hero.

Tipos de degradado

• Lineal: los colores se mezclan a lo largo de una línea recta en cualquier ángulo (0–360°)
• Radial: los colores irradian desde el centro, como círculo o elipse
• Cónico: los colores giran alrededor de un punto central (ideal para ruedas de color y efectos de gráfico circular)

Funciones

• Paradas de color ilimitadas: añada o elimine colores libremente
• Control de posición: deslice cada color de 0% a 100%
• Control de ángulo: rote degradados lineales y cónicos con precisión
• Vista previa en vivo: vea su degradado actualizarse al instante
• Botón aleatorio: genere una combinación de colores nueva para inspirarse
• Salida CSS limpia: copie una sola línea lista para pegar

Cómo usar el CSS

Copie el código generado y aplíquelo a cualquier elemento. Por ejemplo:

.hero {
  background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%);
}

Consejos

• Dos o tres colores suelen verse más limpios que muchos
• Para fondos sutiles, use colores cercanos en la rueda de color
• Para efectos vívidos, use colores complementarios
• Los degradados cónicos son perfectos para spinners de carga y selectores de color

Privacidad

Esta herramienta funciona completamente en su navegador. Nada se sube ni se almacena.

Paso a paso

1. Elige el Tipo: lineal, radial o cónico.
2. En los degradados lineales ajusta el Ángulo; en los radiales, la Forma (círculo o elipse).
3. Añade paradas de color y muévelas. Con Aleatorio obtienes ideas nuevas.
4. Copia el código con Copiar CSS.

Preguntas frecuentes

¿Cómo uso el código?
Pégalo como background o background-image en una regla CSS, por ejemplo para el fondo de una sección o de un botón.

¿Qué es un degradado cónico?
Los colores giran alrededor de un punto central, como en un gráfico circular o en una rueda de color.

¿Cuántas paradas de color puedo usar?
Todas las que quieras. Más paradas dan más control, pero hacen el resultado más difícil de leer y mantener.