Cómo usarla
- Elige un degradado lineal, radial o cónico y define el ángulo o la posición del centro.
- Define el color, la opacidad y la posición de cada punto. Añade hasta seis puntos o elimina los que no necesites.
- Revisa la vista previa y copia la línea CSS en tu hoja de estilos.
Cómo funciona
El resultado es una declaración estándar de fondo CSS. Los degradados lineales siguen un ángulo: 0deg va de abajo hacia arriba, 90deg de izquierda a derecha y 180deg de arriba hacia abajo. Los degradados radiales se expanden desde un punto central en forma de círculo o de elipse que se ajusta al contenedor. Los degradados cónicos giran alrededor de un punto central y empiezan en el ángulo elegido. Son útiles para crear efectos similares a los de un gráfico circular y ruedas de color.
Las posiciones de color se escriben en el orden en que aparecen, así que puedes arrastrarlas libremente. Si una posición tiene la opacidad reducida, se escribe como rgba(), lo que permite que se vea el fondo. Dos posiciones en el mismo punto crean un borde definido, sin transición; así se hacen las franjas.
Las tres funciones de degradado son compatibles con todos los navegadores actuales. De forma predeterminada, los degradados se mezclan en el espacio de color sRGB, lo que puede producir un tono ligeramente gris entre colores complementarios (por ejemplo, azul y amarillo). Para evitarlo, añade un punto intermedio con un color más brillante.
Ejemplos
Fondo sutil para encabezados
linear-gradient(180deg, #f5f7fa 0%, #c3cfe2 100%) crea una transición suave de arriba hacia abajo que mantiene la legibilidad del texto oscuro.
Franjas con bordes definidos
Usa cuatro puntos: #0b5d1e 0%, #0b5d1e 50%, #f2c14e 50%, #f2c14e 100%. Los dos puntos en 50% se unen sin transición y forman dos mitades de color sólido.
Efecto de foco de luz
Un degradado radial (circle at top left) desde rgba(255, 255, 255, 0.6) hasta rgba(255, 255, 255, 0), superpuesto a un color, crea un suave efecto de luz en la esquina.
Preguntas frecuentes
¿En qué dirección va 0deg?
En CSS, 0deg apunta hacia arriba, así que el degradado empieza abajo y termina arriba. 90deg va de izquierda a derecha. Esto difiere de algunas aplicaciones de diseño, donde 0° suele ir de izquierda a derecha.
¿Puedo aplicar el degradado al texto?
Sí: aplica el fondo y luego añade background-clip: text y color: transparent. Comprueba que el texto siga siendo legible sobre la página en todos los puntos del degradado.
¿Necesito prefijos de proveedor como -webkit-linear-gradient?
No. Los navegadores actuales admiten la sintaxis sin prefijos. Solo necesitas prefijos para navegadores muy antiguos.
Privacidad
Todo se genera en tu navegador. Tus colores y ajustes no se envían ni se almacenan.