Creador de Degradados.

Crea degradados CSS lineales, radiales o cónicos con vista previa en vivo. Ajusta colores y dirección, luego copia el CSS.

0%
100%

          
        

Elige un tipo de degradado (lineal, radial o cónico), añade paradas de color, ajusta sus posiciones y ve el resultado en tiempo real. La propiedad CSS background generada está lista para copiar y pegar directamente en tu proyecto.

Cómo usarlo

Selecciona un tipo de degradado, ajusta el ángulo (para lineal/cónico), haz clic en las muestras de color para cambiarlos y arrastra los controles para establecer las posiciones. Haz clic en + Añadir color para más paradas. Copia el CSS del bloque oscuro a la derecha.

Ejemplos

Lineal atardecer (135°) linear-gradient(135deg, #ee6c4d 0%, #3859d5 100%)
Resplandor radial radial-gradient(circle, #ffffff 0%, #3859d5 100%)
Rueda de color cónica conic-gradient(from 0deg, #ee6c4d, #3859d5, #1f8a5b, #ee6c4d)

FAQ

¿Qué es un degradado cónico?

Un degradado cónico rota los colores alrededor de un punto central. Es útil para gráficos de tarta, ruedas de color, efectos de dial y cualquier diseño donde los colores transicionan en barrido.

¿Cuántas paradas de color puedo añadir?

Las que quieras — haz clic en + Añadir color para insertar paradas adicionales. El CSS es válido independientemente de cuántas paradas uses.

Herramientas relacionadas

Privacidad y datos

Esta herramienta funciona completamente en tu navegador. Nada de lo que escribes o pegas se envía a ningún servidor — todo el procesamiento ocurre localmente en tu dispositivo.