Degradado CSS: sintaxis y ejemplos para fondo o texto

Un degradado en CSS se crea con una sola propiedad, sin imágenes ni herramientas externas. Aquí tienes la sintaxis para fondo, texto y botones, con ejemplos de código reales. Al final tienes también un par de generadores visuales, por si prefieres ajustarlo a golpe de clic.

Degradado lineal para un fondo

La función linear-gradient() crea una transición de color en línea recta. Se usa como valor de background, igual que pondrías un color plano.

.fondo-degradado {
  background: linear-gradient(135deg, #4a90d9, #7b2ff7);
}

El primer valor (135deg) es el ángulo del degradado; los dos colores son el punto de inicio y el de fin. Puedes añadir más colores separados por comas para un degradado de varios tonos:

.fondo-tres-colores {
  background: linear-gradient(135deg, #4a90d9, #7b2ff7, #f75990);
}

Si no indicas ángulo, el degradado va de arriba a abajo por defecto. Para ir de izquierda a derecha, usa to right en vez de un grado.

Degradado radial y cónico

Un degradado radial parte de un punto central y se expande hacia fuera, como un foco de luz. Se define con radial-gradient():

.fondo-radial {
  background: radial-gradient(circle, #4a90d9, #0d1b2a);
}

Un degradado cónico gira los colores alrededor de un punto, como las agujas de un reloj. Es el más nuevo de los tres y el que peor soportan los navegadores muy antiguos, aunque hoy funciona en todos los actuales:

.fondo-conico {
  background: conic-gradient(#4a90d9, #7b2ff7, #f75990, #4a90d9);
}

Usa radial para efectos de foco o botones circulares, y cónico para ruedas de color o indicadores de progreso circulares.

Degradado en texto y botones

Para aplicar un degradado al propio texto, no al fondo, necesitas tres propiedades juntas. El degradado como fondo, background-clip: text para recortarlo con la forma de las letras, y el color de texto transparente:

.titulo-degradado {
  background: linear-gradient(135deg, #4a90d9, #7b2ff7);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

El prefijo -webkit- ya no es obligatorio en los navegadores modernos. Conviene mantenerlo junto a la versión estándar para cubrir versiones algo más antiguas de Safari.

Para un botón con fondo degradado, la propiedad es la misma que para cualquier fondo — solo cambia el selector:

.boton-degradado {
  background: linear-gradient(135deg, #4a90d9, #7b2ff7);
  border: none;
  color: white;
  padding: 12px 24px;
  border-radius: 6px;
}

Generadores visuales de degradados

Si prefieres ajustar el degradado visualmente y copiar el código resultante, en vez de escribirlo a mano, estas dos herramientas gratuitas funcionan bien:

• Ultimate CSS Gradient Editor (ColorZilla): editor visual completo, con más de 135 degradados predefinidos y varios formatos de color de salida.
• CSS Gradient: más sencillo, con galería de degradados listos para usar y vista previa en tiempo real.

¿Buscas otros generadores de código CSS, además de degradados (sombras, animaciones, botones)? Tengo un listado más amplio en generadores de código CSS para páginas web.

Preguntas frecuentes

¿Necesito prefijos de navegador para los degradados CSS?

No para el fondo: linear-gradient, radial-gradient y conic-gradient funcionan sin prefijo en todos los navegadores modernos. Solo el degradado de texto necesita mantener -webkit-background-clip junto a la versión estándar.

¿Puedo animar un degradado CSS?

Sí, aunque no se puede hacer transición directa entre dos degradados distintos con transition. Lo habitual es animar background-position sobre un fondo más grande que el elemento. También puedes usar @property en navegadores que lo soportan.

¿Qué diferencia hay entre degradado y transición de color normal?

Un degradado es estático: muestra varios colores mezclándose en el mismo elemento a la vez. Una transición cambia un color por otro con el tiempo, por ejemplo al pasar el ratón. Son propiedades distintas y no se sustituyen entre sí.

¿Cómo hago un degradado que vaya de transparente a un color?

Usa transparent como uno de los colores: linear-gradient(to right, transparent, #4a90d9). Es útil para difuminar el borde de una imagen o crear un velo sobre una foto de fondo.

Si este artículo te ha resuelto la duda, compártelo con quien esté peleándose con su primer degradado en CSS.