Generador Gradiente CSS Gratis: Crear Degradados Lineales Radiales

A Selecciona tipo (lineal/radial), elige colores, ajusta ángulo y copia el código CSS generado.

A Lineal (dirección recta) y radial (desde centro). Ambos soportan múltiples colores.

A Sí, añade paradas de color adicionales para gradientes más complejos.

A Los degradados lineales fluyen en línea recta, ya sea horizontal, vertical o diagonalmente. Controlas la dirección con el control deslizante de ángulo, como establecerlo en 90 grados para un desvanecimiento vertical. Los degradados radiales se expanden hacia afuera desde un punto central, creando un efecto circular u ovalado. No puedes controlar directamente la forma más allá de lo circular con esta herramienta, pero puedes elegir dónde está el centro.

A La herramienta genera CSS estándar que funciona en Chrome, Firefox, Safari y Edge. Internet Explorer 9 y anteriores no muestran degradados, pero eso es menos del 1% del tráfico global hoy. Para navegadores antiguos, añade un color de fondo sólido como fallback en tu CSS antes de la propiedad de degradado. Así los usuarios verán un color plano si no hay soporte para degradados. Prueba rápida: pega tu código en las herramientas de desarrollador de cualquier navegador moderno para verificarlo.

A Las bandas ocurren cuando la transición de color parece rayas en lugar de una mezcla suave. Esto pasa si tu degradado abarca demasiados píxeles sin suficientes paradas de color. Para una sección hero de ancho completo, añade una tercera parada de color entre tus dos colores principales. En fondos grandes (1920px+), prueba background-attachment: fixed para reducir el banding visual. El generador entrega un código limpio, pero los navegadores limitan el renderizado. Truco rápido: usa colores con brillo similar para suavizar la transición.

A Tu degradado respetará la configuración de alto contraste del sistema, pero la herramienta no la simula. Los problemas de contraste aparecen cuando dos colores tienen luminosidad similar, como el amarillo pastel junto al rosa pálido. Revisión rápida: convierte ambos códigos hex a HSL y verifica que sus valores L difieran por al menos 30 puntos. Para secciones hero, prueba tu degradado en el modo de alto contraste de Windows o con una extensión como Axe. Los 12 preajustes fueron elegidos pensando en accesibilidad, pero los colores personalizados son tu responsabilidad.

A Esta versión no incluye guardado, lo siento. Truco rápido: pega el CSS generado en un archivo de texto, un snippet de CodePen o el panel de snippets de las herramientas de desarrollo. Muchos diseñadores crean un archivo "gradients.css" en su proyecto con 5 a 10 favoritos listos para usar. Te toma 10 segundos la primera vez y te ahorra rehacerlos cada semana.