Crea hermosos degradados lineales, radiales y c nicos con total personalizaci n. Copia el c digo CSS al instante o exporta tu degradado como PNG, JPG, WebP o SVG. Ideal para fondos web, gr ficos para redes sociales y proyectos de dise o. Prueba nuestro Generador de Paleta de Colores con IA para inspirarte.
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
Tipo m s com n. Los colores se transforman en l nea recta en cualquier ngulo. Ideal para fondos, botones y encabezados. Use 90 para efectos verticales, 0 para horizontales o 45 para diagonales.
Transiciones circulares. Los colores irradian desde un punto central. Ideal para efectos de foco, brillos y elementos de interfaz circulares. Ajusta la posici n central para obtener efectos descentrados.
Barrido angular. Los colores giran alrededor de un punto central como en una rueda crom tica. Ideal para gr ficos circulares, indicadores de carga y efectos art sticos. Comb nalo con nuestro Animador de iconos SVG para crear degradados animados.
Crea secciones principales y fondos de p gina llamativos. Exporta como WebP usando nuestro convertidor de PNG a WebP para una carga m s r pida.
Dise a publicaciones para Instagram, encabezados para Twitter y miniaturas para YouTube. Usa nuestro redimensionador de im genes para redes sociales para obtener las dimensiones perfectas.
Crea fondos de diapositivas profesionales. Exporta como PNG y comprueba el resultado con nuestro analizador de PNG.
Dise a botones, tarjetas y elementos de navegaci n. Utiliza el c digo CSS directamente en tus hojas de estilo.
PNG: Calidad sin p rdidas, archivo de mayor tama o. Ideal para gr ficos que requieren edici n posterior. JPG: Archivos m s peque os, pero sin transparencia. Perfecto para fondos web. WebP: Lo mejor de ambos mundos: archivos peque os con buena calidad. SVG: Formato vectorial, escalable infinitamente, archivo de menor tama o. Utilice nuestros convertidores de PNG a JPG o PNG a WebP para cambiar de formato posteriormente.
S ! Puedes usar libremente todos los degradados que crees para proyectos personales o comerciales. No hay restricciones ni requisitos de atribuci n. El c digo CSS y las im genes exportadas est n completamente libres de derechos.
Para fondos de pantalla completa, 1920 1080 funciona bien. Para dise os optimizados para m viles, considere 1280 720. Para redes sociales, consulte los requisitos espec ficos de la plataforma con nuestro redimensionador de im genes para redes sociales . La exportaci n a SVG ofrece escalabilidad ilimitada con el menor tama o de archivo.
A ade varios puntos de color (entre 3 y 5 funcionan bien) y distrib yelos uniformemente a lo largo del degradado. Utiliza colores an logos (vecinos en la rueda crom tica) para transiciones suaves, o usa nuestro Generador de Paleta de Colores con IA para encontrar combinaciones armoniosas. Evita colocar colores muy diferentes demasiado cerca unos de otros.
Los degradados SVG se basan en vectores, lo que significa que se adaptan a cualquier tama o sin perder calidad. El tama o del archivo suele ser mucho menor que el de PNG (a menudo menos de 1 KB). Son perfectos para el dise o web adaptable. Sin embargo, si necesitas usar el degradado en un software que no admite SVG, utiliza nuestro convertidor de SVG a PNG.
S ! El CSS generado utiliza una sintaxis de degradado moderna compatible con todos los navegadores actuales (Chrome, Firefox, Safari, Edge). Los degradados lineales y radiales cuentan con una compatibilidad de m s del 98 % entre navegadores. Los degradados c nicos funcionan en todos los navegadores modernos, pero podr an requerir una soluci n alternativa para los m s antiguos.