Tailwind CSS Background Cheatsheet

Complete reference for all Tailwind v4 background utilities.
Click any class to copy to clipboard.

Background Color

Use bg-{color}-{shade} to set the background color.

Syntax

bg-blue-500bg-red-600bg-emerald-400bg-slate-900

With Opacity Modifier

Add opacity using the /{opacity} modifier:

bg-blue-500/50bg-red-600/75bg-black/25

100% / 75% / 50% / 25%

View all Tailwind colors →

Background Gradient

Create gradients with bg-gradient-to-{direction} combined with from-*, via-*, and to-*.

Gradient Directions

Gradient Color Stops

from-{color}

Starting color

via-{color}

Middle color (optional)

to-{color}

Ending color

bg-gradient-to-r from-pink-500 to-orange-500

from-green-400 via-blue-500 to-purple-600

Background Size

Control how background images are sized within their container.

Background Position

Control the position of background images.

Background Repeat

Control how background images are repeated.

Background Attachment

Control whether background images scroll with the viewport or remain fixed.

bg-fixed: Background stays in place when scrolling (parallax effect).
bg-local: Background scrolls with the element's content.
bg-scroll: Background scrolls with the viewport (default).

Background Clip

Control the bounding box for an element's background.

Gradient Text Effect with bg-clip-text

Gradient Text

<span class="bg-gradient-to-r from-purple-500 via-pink-500 to-red-500
       bg-clip-text text-transparent font-bold">
  Gradient Text
</span>

Background Origin

Control where a background image is positioned relative to borders, padding, and content.

Background Image

Set background images using arbitrary values.

Arbitrary Values

Use bracket notation for custom background images:

<!-- Local image -->
<div class="bg-[url('/images/hero.jpg')]">

<!-- External URL -->
<div class="bg-[url('https://example.com/image.png')]">

<!-- Inline SVG pattern -->
<div class="bg-[url('data:image/svg+xml,...')]">

Common Patterns

Gradient Text Effect

Hello World

bg-gradient-to-r from-cyan-500 to-blue-500
bg-clip-text text-transparent

Image Overlay

Overlay

<div class="bg-cover bg-center relative">
  <div class="absolute inset-0 bg-black/50">
    <!-- Content -->
  </div>
</div>

Hero Section with Gradient Overlay

<section class="bg-cover bg-center bg-no-repeat bg-fixed"
         style="background-image: url('/hero.jpg')">
  <div class="bg-gradient-to-r from-black/70 to-transparent">
    <div class="container mx-auto px-4 py-32">
      <h1 class="text-white text-5xl font-bold">Hero Title</h1>
    </div>
  </div>
</section>

Responsive Backgrounds

<!-- Different background colors at breakpoints -->
<div class="bg-blue-500 md:bg-green-500 lg:bg-purple-500">

<!-- Different sizes at breakpoints -->
<div class="bg-contain md:bg-cover lg:bg-auto">

<!-- Different positions at breakpoints -->
<div class="bg-center md:bg-left lg:bg-right">

Pattern Background

<div class="bg-repeat bg-slate-100"
     style="background-image: url('pattern.svg');
            background-size: 20px 20px;">

Quick Reference

Category	Classes
Color	`bg-{color}-{shade}`, `bg-{color}/50`
Gradient	`bg-gradient-to-{dir}`, `from-`, `via-`, `to-*`
Size	`bg-auto`, `bg-cover`, `bg-contain`
Position	`bg-center`, `bg-top`, `bg-bottom`, `bg-left`, `bg-right`, ...
Repeat	`bg-repeat`, `bg-no-repeat`, `bg-repeat-x`, `bg-repeat-y`
Attachment	`bg-fixed`, `bg-local`, `bg-scroll`
Clip	`bg-clip-border`, `bg-clip-padding`, `bg-clip-content`, `bg-clip-text`
Origin	`bg-origin-border`, `bg-origin-padding`, `bg-origin-content`

See Tailwind classes on any website

Frontend Hero's Tailwind Scanner shows you all Tailwind classes of any element. Inspect backgrounds, gradients, colors, and more.

Get Frontend Hero now →

Explore more Tailwind tools

Tailwind Grid Generator

Create grid layouts visually

Tailwind Flexbox Generator

Create flex layouts visually

Tailwind Gradient Generator

Create custom gradients

Tailwind Text Gradient

Gradient text effects

Tailwind Gradients Collection

275+ ready-to-use gradients

Tailwind Colors

Complete 240+ color palette

Tailwind Box Shadow Generator

Design multi-layer shadows

Tailwind Text Shadow

Add depth to text with shadows

Tailwind Filter Generator

Apply blur, brightness & more

Tailwind Transform Generator

Rotate, scale & translate elements

Tailwind Animation Generator

Create built-in & custom animations

Tailwind Transition Generator

Smooth hover transitions

Tailwind Config Generator

Generate your config file

Tailwind Input Generator

Design form inputs visually

Tailwind Class Sorter

Organize classes in order

Flexbox Cheatsheet

All flex utilities visualized

Overflow Cheatsheet

Control content overflow

Browse all free Tailwind tools →