Herramienta Gratuita
CSS Gradient Generator
Construye degradados CSS lineales, radiales y cónicos visualmente. Arrastra paradas de color, ajusta el ángulo y la posición, y copia el CSS listo para usar.
CSS
background: linear-gradient(135deg, #6366f1 0%, #06b6d4 100%);Tipo
Ángulo135°
Paradas de color
0%
100%
Preestablecidos
Tipos de degradado
Los degradados lineales hacen transición a lo largo de una línea recta en cualquier ángulo. Los degradados radiales irradian desde un punto central. Los degradados cónicos barren alrededor de un punto central — útiles para gráficos circulares y ruedas de color.
Cómo usar
- Elige un tipo de degradado (linear, radial o conic).
- Añade o arrastra paradas de color para definir los colores.
- Copia el resultado CSS directamente en tu hoja de estilos.
Todo el procesamiento ocurre en tu navegador — nada se envía a ningún servidor.
Preguntas Frecuentes
- ¿El CSS generado es compatible entre navegadores?
- Sí. El resultado utiliza sintaxis de degradado CSS estándar compatible con todos los navegadores modernos.
- ¿Puedo compartir un degradado?
- Sí. Haz clic en Compartir — el estado del degradado está codificado en la URL, que puedes copiar y enviar.