Generador Gradientes CSS
Diseña degradados lineales, radiales y cónicos en tiempo real con control milimétrico de paradas de color.
Vista Previa
Design Card
CSS Gradient
background: linear-gradient(90deg, rgba(241, 39, 17, 1) 0%, rgba(245, 175, 25, 1) 100%)
Puntos de Color (Stops) Click en la barra para agregar puntos
Paletas y Estilos Predefinidos
css
background: rgba(241, 39, 17, 1);
background: linear-gradient(90deg, rgba(241, 39, 17, 1) 0%, rgba(245, 175, 25, 1) 100%); Tipo de Degradado
90°
Puntos de Color (Stops)
0%
100%
Cómo crear degradados CSS
Guía paso a paso para diseñar e integrar fondos con gradientes modernos.
1
1. Selecciona el tipo de degradado y ángulo
Elige entre lineal (linear-gradient), radial concéntrico o cónico angular según la composición visual deseada.
2
2. Ajusta y distribuye los puntos de color
Arrastra los controladores en la barra visual o ingresa coordenadas numéricas de color, opacidad y porcentaje.
3
3. Copia el código a tu proyecto
Elige el formato de exportación deseado (CSS puro, clase arbitraria de Tailwind o JavaScript) y pégalo directamente en tus estilos.
Preguntas Frecuentes
Todos los navegadores modernos (Chrome, Firefox, Safari, Edge) cuentan con soporte nativo completo para degradados cónicos desde hace varios años.
El fallback background garantiza que los entornos antiguos o lectores que no renderizan gradientes mantengan un fondo legible y de buen contraste.
Sí, la pestaña Tailwind ofrece la sintaxis de clases arbitrarias bg-[linear-gradient(...)] compatible con Tailwind CSS v3 y v4 sin configuración extra.