background-image

Ejemplos

Ejemplo básico

Usa la sintaxis bg-[<value>] para establecer la imagen de fondo de un elemento:

<div class="bg-[url(/img/mountains.jpg)] ..."></div>

Añadiendo un degradado lineal

Usa utilidades como bg-linear-to-r y bg-linear-<angle> con las utilidades de parada de color para añadir un degradado lineal a un elemento:

<div class="h-14 bg-linear-to-r from-cyan-500 to-blue-500"></div>
<div class="h-14 bg-linear-to-t from-sky-500 to-indigo-500"></div>
<div class="h-14 bg-linear-to-bl from-violet-500 to-fuchsia-500"></div>
<div class="h-14 bg-linear-65 from-purple-500 to-pink-500"></div>

Añadiendo un degradado radial

Usa las utilidades bg-radial y bg-radial-[<position>] con las utilidades de parada de color para añadir un degradado radial a un elemento:

<div class="size-18 rounded-full bg-radial from-pink-400 from-40% to-fuchsia-700"></div>
<div class="size-18 rounded-full bg-radial-[at_50%_75%] from-sky-200 via-blue-400 to-indigo-900 to-90%"></div>
<div class="size-18 rounded-full bg-radial-[at_25%_25%] from-white to-zinc-900 to-75%"></div>

Añadiendo un degradado cónico

Usa las utilidades bg-conic y bg-conic-<angle> con las utilidades de parada de color para añadir un degradado cónico a un elemento:

<div class="size-24 rounded-full bg-conic from-blue-600 to-sky-400 to-50%"></div>
<div class="size-24 rounded-full bg-conic-180 from-indigo-600 via-indigo-50 to-indigo-600"></div>
<div class="size-24 rounded-full bg-conic/decreasing from-violet-700 via-lime-300 to-violet-700"></div>

Estableciendo paradas de color del degradado

Usa utilidades como from-indigo-500, via-purple-500, y to-pink-500 para establecer los colores de las paradas del degradado:

<div class="bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 ..."></div>

Estableciendo posiciones de parada del degradado

Usa utilidades como from-10%, via-30%, y to-90% para establecer posiciones más precisas para las paradas de color del degradado:

<div class="bg-gradient-to-r from-indigo-500 from-10% via-sky-500 via-30% to-emerald-500 to-90% ..."></div>

Cambiando el modo de interpolación

Usa el modificador de interpolación para controlar el modo de interpolación de un degradado:

<div class="bg-linear-to-r/srgb from-indigo-500 to-teal-400"></div>
<div class="bg-linear-to-r/hsl from-indigo-500 to-teal-400"></div>
<div class="bg-linear-to-r/oklab from-indigo-500 to-teal-400"></div>
<div class="bg-linear-to-r/oklch from-indigo-500 to-teal-400"></div>
<div class="bg-linear-to-r/longer from-indigo-500 to-teal-400"></div>
<div class="bg-linear-to-r/shorter from-indigo-500 to-teal-400"></div>
<div class="bg-linear-to-r/increasing from-indigo-500 to-teal-400"></div>
<div class="bg-linear-to-r/decreasing from-indigo-500 to-teal-400"></div>

Por defecto, los degradados se interpolan en el espacio de color oklab.

Eliminando imágenes de fondo

Usa la utilidad bg-none para eliminar una imagen de fondo existente de un elemento:

<div class="bg-none"></div>

Usando un valor personalizado

Usa utilidades como bg-linear-[<value>] y from-[<value>] para establecer el gradient basado en un valor completamente personalizado:

<div class="bg-linear-[25deg,red_5%,yellow_60%,lime_90%,teal] ...">
  <!-- ... -->
</div>

Para variables CSS, también puedes usar la sintaxis bg-linear-(<custom-property>) :

<div class="bg-linear-(--my-gradient) ...">
  <!-- ... -->
</div>

Esto es solo un atajo para bg-linear-[var(<custom-property>)] que agrega la función var() por ti automáticamente.

Responsive design

Prefija una utilidad background-image con una variante de breakpoint como md: para aplicar la utilidad solo en tamaños de pantalla medium y superiores:

<div class="from-purple-400 md:from-yellow-500 ...">
  <!-- ... -->
</div>

Aprende más sobre el uso de variantes en la documentación de variantes.

Personalizando tu tema

Usa las variables de tema --color-* para personalizar las utilidades color en tu proyecto:

@theme {
  --color-regal-blue: #243c5a; 
}

Ahora utilidades como from-regal-blue,via-regal-blue, y to-regal-blue pueden ser usadas en tu marcado:

<div class="from-regal-blue">
  <!-- ... -->
</div>

Aprende más sobre la personalización de tu tema en la documentación del tema.