Background utilities Tailwind CSS v4.1. Colors (bg-{color}, palette OKLCH P3), Gradients (bg-linear-*, bg-radial-*, bg-conic-* NEW), Images (bg-cover, bg-contain, bg-repeat), Blend modes.
/plugin marketplace add fusengine/agents/plugin install fuse-tailwindcss@fusengine-pluginsThis skill inherits all available tools. When active, it can use any tool Claude has access to.
references/colors.mdreferences/gradients.mdreferences/images.mdComplete reference for background utilities in Tailwind CSS v4.1, including colors, gradients, images, positioning, sizing, and blend modes.
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>
The default Tailwind palette uses OKLCH color space for perceptually uniform colors across the wider P3 gamut:
Each color has 11 shades: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950
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>
bg-linear-to-t - to topbg-linear-to-tr - to top rightbg-linear-to-r - to rightbg-linear-to-br - to bottom rightbg-linear-to-b - to bottombg-linear-to-bl - to bottom leftbg-linear-to-l - to leftbg-linear-to-tl - to top leftbg-linear-<angle> - custom angle (e.g., bg-linear-45)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>
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>
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>
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>
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>
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>
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>
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 -->
<div class="bg-slate-900/50 px-6 py-8 rounded-lg">
Content with translucent background
</div>
<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>
<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>
<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>
<div class="w-full h-80
bg-blue-600
bg-[url(/img/pattern.png)] bg-cover bg-center
bg-blend-multiply
rounded-lg"></div>
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\')',
},
},
},
}
bg-no-repeat and sizing to prevent unwanted repetition/50) instead of rgba for better tree-shakingCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
This skill should be used when the user asks to "create a hookify rule", "write a hook rule", "configure hookify", "add a hookify rule", or needs guidance on hookify rule syntax and patterns.