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%);

Generador de degradado CSS

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.

🔐 100% Private — Client-Side Execution

All processing happens inside your browser using WebAssembly and HTML5 Canvas. Zero file uploads, zero server tracking. Compliant with LGPD & GDPR.

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.

🔥 Speed Up Your Site - 60% Off Launch

Score 99+ on Google PageSpeed Insights

Fast-track Largest Contentful Paint (LCP) under 2.5s and learn secure browser WebAssembly sizing matrices. Get our premium ebook Pixel Perfect with 4 bonus guides.

📕 Get eBook Guide ($9) →

También Te Podría Gustar

Otras herramientas ideales para tu trabajo

Creador de GIF

Combina varias imágenes en un GIF animado. Controla el retraso de fotogramas, ta...

Generador de códigos de barras

Genera al instante códigos de barras CODE128, EAN-13, UPC-A, CODE39, e ITF-14. P...

Generador de iconos de app

Genera cada tamaño de icono de App Store de iOS y Google Play Store a partir de ...

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

Todas las herramientas →