Cómo crear degradados complejos y Mesh Gradients en Tailwind CSS (sin complicar tu config)

Si necesitas posicionar el foco de luz en una coordenada exacta o apilar múltiples capas cromáticas, la sintaxis estándar te obligará a salir del HTML. En esta guía veremos cómo superar los límites de las clases por defecto de Tailwind y cómo copiar degradados complejos listos para producción en una sola línea de código.

<!-- Deep Ocean — Tailwind CSS -->
<div class="bg-[radial-gradient(circle_at_50%_30%,#38bdf8_0%,#0284c7_35%,#1e3a8a_70%,#0f172a_100%)] h-64 w-full rounded-2xl">
  <!-- Tu contenido aquí -->
</div>

#Los límites de las utilidades nativas en Tailwind

Por defecto, Tailwind maneja los degradados lineales mediante una combinación de dirección (bg-gradient-to-r, bg-gradient-to-br) y tres paradas de color (from-, via-, to-).

El problema aparece cuando el diseño exige:

• Más de 3 paradas de color para suavizar la transición y evitar cortes bruscos (por ejemplo, pasar por 5 tonos distintos).
• Degradados radiales descentrados, como colocar un foco de luz en circle at 50% 30% para iluminar la parte superior de una tarjeta móvil.
• Mesh Gradients (mallas multicapa) donde varios focos radiales conviven sobre un mismo lienzo.

#Cómo usar valores arbitrarios para efectos avanzados

Desde la llegada del motor JIT (Just-In-Time) en Tailwind, no necesitas editar tu archivo tailwind.config.js cada vez que pruebas una paleta nueva. Puedes inyectar funciones nativas de CSS dentro de corchetes bg-[...] respetando una única regla: reemplazar los espacios en blanco por guiones bajos (_).

<div class="bg-gradient-to-b from-sky-400 via-blue-700 to-slate-900 h-64 w-full rounded-2xl">
  <!-- Transición lineal rígida -->
</div>

Usando la estructura de nuestra muestra Deep Ocean, definimos la posición exacta del círculo y distribuimos los tonos (#38bdf8, #0284c7, #1e3a8a, #0f172a) con porcentajes específicos:

<div class="bg-[radial-gradient(circle_at_50%_30%,#38bdf8_0%,#0284c7_35%,#1e3a8a_70%,#0f172a_100%)] h-64 w-full rounded-2xl">
  <!-- Luz ambiental focalizada lista para producción -->
</div>

#Cómo construir un Mesh Gradient en Tailwind CSS

Un verdadero efecto de malla (Mesh) en CSS se logra superponiendo varios radial-gradient separados por comas sobre un color de fondo base (bg-[#0f172a]):

<div class="bg-[#0f172a] bg-[radial-gradient(at_20%_25%,#38bdf8_0px,transparent_50%),radial-gradient(at_80%_70%,#1e3a8a_0px,transparent_50%)] h-80 w-full rounded-3xl">
  <!-- Mesh Gradient ligero sin imágenes externas -->
</div>

<!-- Ocean Mesh — Tailwind CSS -->
<div class="bg-[#0f172a] bg-[radial-gradient(at_20%_25%,#38bdf8_0px,transparent_50%),radial-gradient(at_80%_70%,#1e3a8a_0px,transparent_50%)] h-64 w-full rounded-2xl">
  <!-- Tu contenido aquí -->
</div>

#Cuándo usar clases de Tailwind vs. variables CSS

• Usa clases arbitrarias de Tailwind cuando el degradado sea único para un componente puntual (como un Hero Banner o una tarjeta destacada).
• Usa clases en tu archivo CSS global si el mismo degradado se repite en más de 5 componentes distintos del sistema de diseño.

En nuestras colecciones puedes alternar con un clic entre las pestañas CSS Puro y Tailwind CSS para elegir el formato que mejor se adapte a tu arquitectura. Explora todas nuestras paletas listas para copiar en la colección de Degradados para Tailwind o combina efectos multicapa en la galería de Mesh Gradients.