Generador de degradado CSS

Diseña visualmente un degradado lineal o radial y copia el código CSS listo para usar. Instantáneo, hasta 6 paradas de color.

Te quedan 3 intento(s) gratis para esta herramienta hoyIniciar prueba gratis de 3 días →

Tipo

Ángulo135°

Paradas de color

100%

Código CSS

background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);

Elige colores, arrastra paradas, y ajusta el ángulo para construir exactamente el degradado que necesitas — el código CSS `background` se actualiza en vivo y está listo para pegar en tu proyecto. También exporta como imagen PNG.

Preguntas frecuentes

¿Puedo usar más de dos colores?

Sí, hasta 6 paradas de color. Añade una parada, elige su color, y arrastra su posición a lo largo del degradado.

¿El código CSS funciona en todos los navegadores?

Sí. Los degradados lineales y radiales que usan esta sintaxis son compatibles con todos los navegadores modernos.

¿Puedo exportar el degradado como imagen en lugar de CSS?

Sí. El botón Descargar exporta un PNG de 1200×630px del degradado actual — un tamaño común para banners de redes sociales y portadas de blog.

Más herramientas se están traduciendo — explora el catálogo completo en inglés para el resto.

Todas las herramientas →