0%
100%
background: linear-gradient(135deg, #7c3aed 0%, #06b6d4 100%);

Herramientas relacionadas

Sigue con tu tarea usando estas herramientas.

Extractor de colores de imagenExtractor de paleta de coloresEncuentra en una imagen los colores para tu próximo diseño.Comprimir y convertir imágenesCompresión y conversión de imágenesAjusta el tamaño y el formato de la imagen antes de compartirla.Codificador Base64 y URLCodificar/decodificar Base64 · URLConvierte texto a Base64 o a formato URL codificado.
Ver todas las herramientas →

📐 Guía del generador de degradados CSS

El generador de degradados CSS de EVEDAYS es una herramienta visual y gratuita para diseñadores web y desarrolladores front-end. Combina colores en tiempo real para generar al instante un código de degradado CSS atractivo y copiarlo. Tipos de degradado compatibles: • Lineal (Linear): el degradado más común, que une dos puntos en línea recta. Puedes ajustar el ángulo libremente de 0° a 360°. • Radial: un degradado circular que se expande desde el centro hacia fuera. Ideal para dar profundidad a botones y fondos de tarjetas. • Cónico (Conic): un degradado en el que los colores cambian girando alrededor de un punto central. Se usa para crear gráficos circulares y ruedas de color. Funciones principales: • Varias paradas de color: añade dos o más colores para crear degradados complejos. • Control de posición: ajusta con precisión la posición (%) de cada parada con controles deslizantes. • Preajustes: aplica combinaciones de degradado populares con un clic. • Aleatorio: genera combinaciones de colores al azar cuando necesites inspiración. • Vista previa en vivo: todos los cambios se ven al instante en la vista previa.

🎨 Consejos de uso

• Secciones hero de sitios web: usar un degradado lineal como fondo da una primera impresión moderna y elegante. • Efectos hover en botones: aplicar degradados distintos al estado normal y al estado hover crea una sensación interactiva. • Degradados en texto: junto con background-clip: text, puedes aplicar degradados al texto. • Bordes de tarjetas: aplicar un degradado a border-image crea bordes elegantes. • Animaciones de carga: aplicar animation a un degradado cónico crea un indicador de carga giratorio.

💡 Preguntas frecuentes

P. ¿Los degradados funcionan en navegadores antiguos? R. linear-gradient y radial-gradient son compatibles con todos los navegadores modernos, incluido IE10+. conic-gradient es compatible con Chrome 69+, Firefox 83+ y Safari 12.1+. P. ¿Cuántas paradas de color puedo añadir? R. No hay un límite técnico, pero se recomiendan de 2 a 5 paradas por legibilidad y rendimiento. P. ¿Puedo usar el código generado con fines comerciales? R. Por supuesto. El código de degradados CSS no está sujeto a derechos de autor, así que puedes usarlo libremente.