Degradados

Degradados lineales con bg-gradient-to-*

Los degradados lineales son el tipo de gradiente más utilizado en el diseño web. Tailwind CSS proporciona un conjunto de clases utilitarias que permiten crear degradados aplicando una dirección y definiendo los colores de parada mediante las clases from-*, via-* y to-*.

La clase base para un degradado lineal es bg-gradient-to-{dirección}, donde la dirección indica hacia dónde fluye el color:

• bg-gradient-to-r: de izquierda a derecha
• bg-gradient-to-l: de derecha a izquierda
• bg-gradient-to-t: de abajo hacia arriba
• bg-gradient-to-b: de arriba hacia abajo
• bg-gradient-to-tr: hacia la esquina superior derecha
• bg-gradient-to-tl: hacia la esquina superior izquierda
• bg-gradient-to-br: hacia la esquina inferior derecha
• bg-gradient-to-bl: hacia la esquina inferior izquierda

Degradado básico de dos colores

Para crear un degradado simple se necesitan al menos dos colores: el punto de inicio con from-* y el punto final con to-*.

<div class="h-24 rounded-lg bg-gradient-to-r from-blue-500 to-purple-600">
  <!-- Degradado horizontal de azul a morado -->
</div>

Este ejemplo genera un degradado horizontal que comienza en azul y termina en morado. La clase from-blue-500 establece el color inicial y to-purple-600 el color final.

Color intermedio con via-*

La clase via-* permite insertar un color intermedio en el degradado, creando transiciones más suaves y complejas con tres puntos de color.

<div class="h-24 rounded-lg bg-gradient-to-r from-emerald-400 via-cyan-500 to-blue-600">
  <!-- Degradado con tres colores: verde, cian y azul -->
</div>

La clase via-* coloca el color intermedio en el punto medio del degradado por defecto, distribuyendo la transición de forma uniforme entre los tres colores.

Diferentes direcciones

La dirección del degradado cambia completamente el efecto visual. A continuación se muestran varias direcciones aplicadas sobre la misma combinación de colores:

<!-- Degradado vertical descendente -->
<div class="h-32 rounded-lg bg-gradient-to-b from-rose-500 to-orange-400">
  Arriba a abajo
</div>

<!-- Degradado diagonal hacia esquina inferior derecha -->
<div class="h-32 rounded-lg bg-gradient-to-br from-rose-500 to-orange-400">
  Diagonal inferior derecha
</div>

<!-- Degradado vertical ascendente -->
<div class="h-32 rounded-lg bg-gradient-to-t from-rose-500 to-orange-400">
  Abajo a arriba
</div>

Cada variante direccional genera el mismo CSS linear-gradient() pero con distintos ángulos de orientación, lo que permite adaptar el degradado al contexto visual del componente.

Degradados radiales con bg-radial

Tailwind CSS 4 introduce la clase bg-radial para crear degradados radiales directamente con utilidades. A diferencia de los degradados lineales que fluyen en una dirección, los degradados radiales se expanden desde un punto central hacia el exterior en forma circular o elíptica.

Degradado radial básico

<div class="h-48 rounded-lg bg-radial from-yellow-300 to-red-500">
  <!-- Degradado radial de amarillo a rojo -->
</div>

Este degradado parte del centro del elemento con color amarillo y se expande radialmente hacia un rojo intenso en los bordes.

Formas del degradado radial

Se puede controlar la forma del degradado radial con las variantes de forma:

<!-- Degradado radial circular -->
<div class="h-48 rounded-lg bg-radial-circle from-sky-300 to-indigo-600">
  Forma circular
</div>

<!-- Degradado radial elíptico (por defecto) -->
<div class="h-48 rounded-lg bg-radial from-sky-300 to-indigo-600">
  Forma elíptica
</div>

El degradado radial por defecto adopta una forma elíptica que se adapta a las proporciones del contenedor. La variante bg-radial-circle fuerza una forma perfectamente circular.

Posición del centro

Tailwind CSS 4 permite desplazar el origen del degradado radial utilizando variantes de posición:

<!-- Centro en la esquina superior izquierda -->
<div class="h-48 rounded-lg bg-radial-[at_top_left] from-white to-zinc-900">
  Origen arriba-izquierda
</div>

<!-- Centro en la parte inferior -->
<div class="h-48 rounded-lg bg-radial-[at_bottom] from-amber-200 to-orange-700">
  Origen abajo
</div>

La notación de valor arbitrario bg-radial-[at_top_left] permite posicionar el centro del degradado radial en cualquier punto del elemento mediante las mismas palabras clave que acepta radial-gradient() en CSS nativo.

Degradados cónicos con bg-conic

Los degradados cónicos son otra incorporación de Tailwind CSS 4 mediante la clase bg-conic. Este tipo de degradado distribuye los colores alrededor de un punto central en forma de barrido angular, similar a las manecillas de un reloj.

Degradado cónico básico

<div class="size-48 rounded-full bg-conic from-red-500 via-yellow-400 to-red-500">
  <!-- Degradado cónico que recorre el espectro de color -->
</div>

El degradado cónico recorre los colores de forma angular alrededor del centro. En este ejemplo se repite el color rojo al inicio y al final para lograr una transición continua sin cortes visibles.

Rueda de color

Un caso de uso habitual de los degradados cónicos es la creación de una rueda de color:

<div class="size-48 rounded-full bg-conic from-red-500 via-green-500 to-blue-500">
  <!-- Rueda de color simplificada -->
</div>

Ángulo de inicio

Se puede definir el ángulo de inicio del barrido con valores arbitrarios:

<div class="size-48 rounded-full bg-conic-[from_45deg] from-sky-400 via-purple-500 to-sky-400">
  <!-- Degradado cónico iniciando en 45 grados -->
</div>

Los degradados cónicos son especialmente útiles para crear indicadores de progreso, gráficos tipo pastel y efectos decorativos circulares.

Paradas de color con porcentajes

Tailwind CSS 4 permite especificar la posición exacta de cada parada de color dentro del degradado mediante valores arbitrarios en porcentaje. Esto proporciona un control preciso sobre la distribución de los colores.

Posiciones personalizadas en degradados lineales

<div class="h-24 rounded-lg bg-gradient-to-r from-blue-600 from-10% via-purple-500 via-40% to-pink-500 to-90%">
  <!-- Colores distribuidos en posiciones concretas -->
</div>

En este ejemplo, el azul ocupa desde el inicio hasta el 10%, el morado se posiciona en el 40% y el rosa comienza a partir del 90%. Las transiciones entre cada parada se calculan automáticamente.

Transiciones abruptas

Colocando dos paradas de color muy próximas se consiguen bordes duros en lugar de transiciones suaves:

<div class="h-24 rounded-lg bg-gradient-to-r from-red-500 from-0% via-red-500 via-50% to-blue-500 to-50%">
  <!-- Mitad roja y mitad azul sin transición -->
</div>

Esta técnica resulta útil para crear barras de progreso, banderas o divisiones visuales sin suavizado entre colores.

Personalización de degradados con @theme

La directiva @theme permite definir colores y valores personalizados que se pueden emplear en cualquier utilidad de degradado. Toda la configuración reside en el propio archivo CSS, sin necesidad de archivos JavaScript externos.

Definir colores de marca para degradados

@import "tailwindcss";

@theme {
  --color-brand-start: oklch(0.65 0.18 250);
  --color-brand-mid: oklch(0.70 0.15 300);
  --color-brand-end: oklch(0.75 0.12 340);
}

Con estos tokens de diseño definidos, se pueden utilizar directamente en las clases de degradado:

<div class="h-24 rounded-lg bg-gradient-to-r from-brand-start via-brand-mid to-brand-end">
  <!-- Degradado con colores de marca personalizados -->
</div>

Ejemplo completo: tarjeta con degradado personalizado

<section class="rounded-xl bg-gradient-to-br from-brand-start to-brand-end p-8 text-white">
  <h2 class="text-2xl font-bold">Plan Premium</h2>
  <p class="mt-2 text-white/80">Acceso completo a todas las funcionalidades.</p>
  <button class="mt-4 rounded-lg bg-white px-6 py-2 font-semibold text-brand-start">
    Comenzar
  </button>
</section>

Al definir los colores en @theme, cualquier cambio en la paleta de marca se propaga automáticamente a todos los degradados, botones y textos que hagan referencia a esos tokens.

Degradados con opacidad y color-mix()

Tailwind CSS 4 utiliza internamente la función color-mix() de CSS para gestionar la opacidad de los colores. Esto permite crear degradados con colores semitransparentes de forma directa.

Degradados con transparencia

<!-- Degradado con color de inicio semitransparente -->
<div class="h-32 rounded-lg bg-gradient-to-r from-blue-500/50 to-blue-500">
  Degradado de semitransparente a opaco
</div>

<!-- Degradado que se desvanece hacia transparente -->
<div class="h-32 rounded-lg bg-gradient-to-b from-black/70 to-transparent">
  Overlay para imágenes
</div>

La notación from-blue-500/50 aplica un 50% de opacidad al color azul en el punto de inicio del degradado. La clase to-transparent establece el color final como completamente transparente.

Overlay sobre imagen

Un patrón muy común es superponer un degradado semitransparente sobre una imagen de fondo para mejorar la legibilidad del texto:

<div class="relative h-64 overflow-hidden rounded-xl">
  <img src="hero.jpg" alt="Fondo" class="size-full object-cover" />
  <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent"></div>
  <div class="absolute bottom-4 left-4 text-white">
    <h3 class="text-xl font-bold">Título sobre imagen</h3>
    <p class="text-sm text-white/70">Subtítulo con contraste asegurado</p>
  </div>
</div>

Este patrón combina un degradado vertical que va desde negro casi opaco en la parte inferior hasta transparente en la superior, garantizando que el texto blanco sea legible sobre cualquier imagen de fondo.