Generador CSS Gradient Gratis
Este generador CSS gradient gratuito crea un degradado lineal o radial a partir de dos o tres colores y un ángulo, muestra una vista previa y te proporciona el CSS para copiar, incluyendo un fallback de color sólido para navegadores antiguos. Es ideal para diseñadores y desarrolladores que necesitan un fondo para una sección hero, un botón o una tarjeta sin escribir la sintaxis manualmente.
CSS Gradient Generator
Generators and Converters
Sobre esta herramienta
Un degradado CSS es una imagen de fondo dibujada por el navegador, por lo que no requiere descarga y se mantiene nítido a cualquier tamaño. La sintaxis es corta pero fácil de olvidar: linear-gradient toma un ángulo y una lista de colores, y radial-gradient expande los colores desde un punto central.
Elige el estilo, establece el ángulo para un degradado lineal y selecciona dos colores. Activa el tercer color para una mezcla de tres paradas; las paradas se distribuyen uniformemente. La página dibuja una vista previa con los mismos valores e imprime una regla de fondo con un color plano primero, para que los navegadores que no pueden dibujar degradados muestren algo sensato. Los ángulos siguen la regla CSS: 0 grados apunta hacia arriba, 90 hacia la derecha, 180 hacia abajo.
Ten cuidado con el contraste cuando el texto se superpone a un degradado: comprueba las partes más claras y oscuras contra el color del texto con el selector de color. Los degradados con tonos muy diferentes pueden verse turbios en el medio, así que prueba un tercer color que esté entre ellos. Nada de lo que elijas se almacena.
Preguntas frecuentes
¿Qué significa el ángulo en un degradado lineal?
Es la dirección del cambio de color. Cero grados apunta hacia la parte superior, 90 grados hacia la derecha, 180 grados hacia la parte inferior y 270 grados hacia la izquierda. Una diagonal como 135 grados va desde la esquina superior izquierda hacia la esquina inferior derecha.
¿Por qué el CSS incluye un color sólido primero?
Es un fallback. Un navegador que no puede dibujar degradados ignora la línea de degradado y utiliza el color plano anterior, por lo que el fondo nunca está vacío. Todos los navegadores actuales soportan degradados, así que esto solo cubre navegadores muy antiguos.
¿Cuál es la diferencia entre lineal y radial?
Un degradado lineal cambia de color a lo largo de una línea recta en el ángulo que elijas. Un degradado radial comienza en el centro y cambia de color hacia afuera en un círculo u óvalo, lo que es ideal para focos, botones y brillos suaves.
¿Puedo usar más de tres colores?
Esta herramienta crea dos o tres paradas, lo que cubre la mayoría de diseños. Para más, copia el CSS y añade paradas de color adicionales manualmente, separadas por comas, opcionalmente con una posición como #ff0000 40%.