Tailwindcss Backgrounds

Includes gradient color-stop control (from-*/via-*/to-*), custom-angle linear gradients, and theme-config extension for custom colors and background images.

Tailwind CSS Backgrounds Skill

Complete reference for background utilities in Tailwind CSS v4.1, including colors, gradients, images, positioning, sizing, and blend modes.

Background Colors

Use bg-{color} utilities to set background colors with the modernized OKLCH color palette.

<!-- Basic colors -->
<div class="bg-red-500"></div>
<div class="bg-blue-600"></div>
<div class="bg-emerald-400"></div>

<!-- Opacity modifiers -->
<div class="bg-blue-500/50"></div>
<div class="bg-slate-900/75"></div>

Color Palette (OKLCH P3)

The default Tailwind palette uses OKLCH color space for perceptually uniform colors across the wider P3 gamut:

• Neutrals: slate, gray, zinc, neutral, stone
• Colors: red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose

Each color has 11 shades: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950

Linear Gradients

Create linear gradients using bg-linear-* utilities with direction and color stops.

<!-- Directions -->
<div class="bg-linear-to-t from-blue-500 to-purple-500"></div>
<div class="bg-linear-to-r from-green-400 via-blue-500 to-purple-600"></div>
<div class="bg-linear-to-br from-yellow-200 to-red-600"></div>

<!-- Available directions -->
<!-- bg-linear-to-t, to-tr, to-r, to-br, to-b, to-bl, to-l, to-tl -->

<!-- Custom angles -->
<div class="bg-linear-45 from-slate-400 to-slate-600"></div>
<div class="bg-linear-180 from-indigo-500 to-pink-500"></div>

Direction Utilities

• bg-linear-to-t - to top
• bg-linear-to-tr - to top right
• bg-linear-to-r - to right
• bg-linear-to-br - to bottom right
• bg-linear-to-b - to bottom
• bg-linear-to-bl - to bottom left
• bg-linear-to-l - to left
• bg-linear-to-tl - to top left
• bg-linear-<angle> - custom angle (e.g., bg-linear-45)

Radial Gradients

Create radial gradients using bg-radial-* utilities.

<div class="bg-radial from-yellow-400 to-slate-900"></div>
<div class="bg-radial from-purple-200 via-blue-400 to-slate-950"></div>

Conic Gradients (NEW in v4.1)

Create conic gradients using bg-conic-* utilities, perfect for color wheels and circular patterns.

<div class="bg-conic-0 from-red-500 to-red-500"></div>
<div class="bg-conic-45 from-blue-400 via-purple-500 to-pink-400"></div>
<div class="bg-conic-[from_45deg] from-slate-400 to-slate-600"></div>

Gradient Color Stops

Control gradient color stops with from-*, via-*, and to-* utilities.

<!-- Two colors -->
<div class="bg-linear-to-r from-blue-500 to-purple-500"></div>

<!-- Three colors -->
<div class="bg-linear-to-r from-green-400 via-blue-500 to-purple-600"></div>

<!-- Custom positions -->
<div class="bg-linear-to-r from-blue-500 from-0% to-purple-500 to-100%"></div>

Background Images

Use bg-[url(...)] to apply custom background images.

<div class="bg-[url(/img/mountains.jpg)]"></div>
<div class="bg-[url(data:image/svg+xml,...)]"></div>

Background Size

Control how background images are sized.

<!-- Predefined sizes -->
<div class="bg-cover"><!-- Fills container, may crop --></div>
<div class="bg-contain"><!-- Scales to fit, may show blank space --></div>

<!-- Custom sizes -->
<div class="bg-[size:10rem]"></div>
<div class="bg-[size:50%]"></div>
<div class="bg-[size:200px_100px]"></div>

Background Position

Position the background image within its container.

<!-- Predefined positions -->
<div class="bg-top-left"></div>
<div class="bg-top"></div>
<div class="bg-top-right"></div>
<div class="bg-left"></div>
<div class="bg-center"></div>
<div class="bg-right"></div>
<div class="bg-bottom-left"></div>
<div class="bg-bottom"></div>
<div class="bg-bottom-right"></div>

<!-- Custom positions -->
<div class="bg-[position:25%_75%]"></div>

Background Repeat

Control how background images repeat.

<!-- Repeat -->
<div class="bg-repeat"><!-- Tile in both directions --></div>
<div class="bg-repeat-x"><!-- Tile horizontally --></div>
<div class="bg-repeat-y"><!-- Tile vertically --></div>

<!-- No repeat -->
<div class="bg-no-repeat"><!-- Single image --></div>

Background Blend Modes

Combine background colors with images using blend modes.

<div class="bg-blue-500 bg-[url(...)] bg-blend-multiply"></div>
<div class="bg-slate-700 bg-[url(...)] bg-blend-overlay"></div>
<div class="bg-amber-400 bg-[url(...)] bg-blend-soft-light"></div>

<!-- Available blend modes -->
<!-- multiply, screen, overlay, darken, lighten, color-dodge,
     color-burn, hard-light, soft-light, difference, exclusion,
     hue, saturation, color, luminosity -->

Complete Examples

Color Background with Opacity

<div class="bg-slate-900/50 px-6 py-8 rounded-lg">
  Content with translucent background
</div>

Gradient Overlay on Image

<div class="bg-[url(/img/hero.jpg)] bg-cover bg-center
           bg-linear-to-br from-black/40 to-transparent
           h-96 flex items-center justify-center">
  <h1 class="text-white text-4xl font-bold">Hero Title</h1>
</div>

Gradient with Multiple Stops

<div class="bg-linear-to-r
           from-emerald-500 from-0%
           via-blue-500 via-50%
           to-purple-600 to-100%
           h-20 rounded-lg"></div>

Conic Gradient (Color Wheel)

<div class="w-32 h-32 rounded-full
           bg-conic-0
           from-red-500 via-yellow-500 via-green-500 via-blue-500 via-purple-500 to-red-500"></div>

Image with Blend Mode

<div class="w-full h-80
           bg-blue-600
           bg-[url(/img/pattern.png)] bg-cover bg-center
           bg-blend-multiply
           rounded-lg"></div>

Customization

Extend background utilities in your Tailwind config:

/** @type {import('tailwindcss').Config} */
export default {
  theme: {
    extend: {
      colors: {
        brand: {
          50: 'oklch(0.971 0.013 17.38)',
          500: 'oklch(0.637 0.237 25.331)',
          950: 'oklch(0.258 0.092 26.042)',
        },
      },
      backgroundImage: {
        gradient: 'url('/img/gradient.png')',
      },
    },
  },
}

Performance Tips

1. Use color utilities instead of hex values for better optimization
2. Combine with bg-no-repeat and sizing to prevent unwanted repetition
3. Layer gradients using multiple background utilities for complex effects
4. Use opacity modifiers (/50) instead of rgba for better tree-shaking
5. Prefer conic/radial gradients over images when possible for smaller file sizes

Detailed References

• colors.md - Load when picking specific color families, shades, OKLCH values, or semantic/accessibility color pairing
• gradients.md - Load when building linear/radial/conic gradients or working with color-stop positioning
• images.md - Load when applying background images, sizing/positioning/repeat, or blend modes