background-image

Ejemplos

Ejemplo básico

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

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

Añadir un gradiente lineal

Utiliza utilidades como bg-linear-to-r y bg-linear-<angle> con las utilidades de paradas de color para añadir un gradiente 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ñadir un gradiente radial

Utiliza las utilidades bg-radial y bg-radial-[<position>] con las utilidades de paradas de color para añadir un gradiente 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ñadir un gradiente cónico

Utiliza las utilidades bg-conic y bg-conic-<angle> con las utilidades de paradas de color para añadir un gradiente 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>

Configurar las paradas de color del gradiente

Utiliza utilidades como from-indigo-500, via-purple-500 y to-pink-500 para configurar los colores de las paradas de gradiente:

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

Configurar las posiciones de parada del gradiente

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

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

Cambiar el modo de interpolación

Utiliza el modificador de interpolación para controlar el modo de interpolación de un gradiente:

<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 gradientes se interpolan en el espacio de color oklab.

Eliminar imágenes de fondo

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

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

Usar un valor personalizado

Usa utilidades como bg-linear-[<value>] y from-[<value>] para establecer el/la gradiente basándose 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 añade la función var() por ti automáticamente.

Diseño responsivo

Antepone a la utilidad background-image el prefijo de una variante de punto de ruptura como md: para aplicar la utilidad únicamente en tamaños de pantalla mediano y superiores:

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

Obtén más información sobre el uso de variantes en la documentación de variantes.

Personalizar el tema

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

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

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

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

Obtén más información sobre cómo personalizar tu tema en la documentación del tema.