Background

• Geometric textures use theme color variables (var(--color-title-*)) and auto-switch in dark/light mode.
• All geometric utilities have dynamic variants: append a color token or size number, e.g. bg-polka-red, bg-polka-2, bg-polka-green-500.
• Gradient utilities (bg-tint, bg-blend, bg-aurora, bg-whisper) support dynamic colors.
• Multiple color formats are supported:

Multiple color formats are supported:

• 1. Theme semantic colors, e.g. *-error, *-error-hover
• 2. Tailwind built-in colors, e.g. *-indigo-500
• 3. Raw color values, e.g. *-[#ff0000]
• 4. CSS named colors, e.g. *-[red], *-[green]

Dot & mesh

bg-polka — large polka dots (24px spacing)

Micro noise

bg-noise — 1px micro dots (3px spacing)

Diagonal hatch

bg-hatch — -45° 1px diagonal lines

Horizontal hatch

bg-hatch-h — 1px horizontal lines

Vertical hatch

bg-hatch-v — 1px vertical lines

Crosshatch

bg-crosshatch — ±45° crossed 0.7px lines

Diagonal stripes

bg-stripes — 8px wide diagonal zebra stripes

Horizontal stripes

bg-stripes-h — 8px horizontal stripes

Vertical stripes

bg-stripes-v — 8px vertical stripes

Blueprint grid

bg-blueprint — 20px minor + 100px major nested grid

Marble

bg-marble — 60°/120° crossing lines simulating marble veining

Grid

bg-grid — 24px standard grid lines

Houndstooth

bg-houndstooth — classic 45° woven houndstooth

Circles

bg-circles — centered nested concentric rings

Chessboard

bg-chessboard — checkered pattern (also used for transparent canvas)

Sunburst

bg-sunburst — radial ray pattern from center

Low-opacity radial spot gradients using bg-whisper-*. Supports dynamic colors and position modifiers.

Multiple color formats are supported:

• 1. Theme semantic colors, e.g. *-error, *-error-hover
• 2. Tailwind built-in colors, e.g. *-indigo-500
• 3. Raw color values, e.g. *-[#ff0000]
• 4. CSS named colors, e.g. *-[red], *-[green]

Default duotone

bg-whisper-blue-500 — default top-left + bottom-right spots

Between (split-screen)

bg-whisper-blue-500 bg-whisper-between — spots shifted to left/right edges

Center (focused glow)

bg-whisper-blue-500 bg-whisper-center — first spot centered

Mono (single color)

bg-whisper-orange-500 bg-whisper-mono — only first spot visible

Duotone (complementary)

bg-whisper-pink-500 bg-whisper-duotone — 180° hue shift

Tritone (analogous)

bg-whisper-orange-500 bg-whisper-tritone — 90° hue shift each spot

Custom CSS variables

bg-whisper-red-500 with style="--bg-2:blue" bg-whisper-red-500 with style="--bg-1-a:0.6" bg-whisper-indigo-500 with style="--bg-2:var(--color-sky-500)" bg-whisper-orange-500 with style="--bg-angle:-80" bg-whisper-orange-500 bg-whisper-center with style="--bg-angle:-80"

Soft three-radial-spot watercolor backgrounds using bg-tint series. Supports dynamic color customization.

Multiple color formats are supported:

• 1. Theme semantic colors, e.g. *-error, *-error-hover
• 2. Tailwind built-in colors, e.g. *-indigo-500
• 3. Raw color values, e.g. *-[#ff0000]
• 4. CSS named colors, e.g. *-[red], *-[green]

Default (primary theme)

bg-tint — uses --color-primary

Green-500

bg-tint-green-500

Custom red

bg-tint-[#ff0000] — arbitrary hex value

High-opacity radial spot misty blend backgrounds using bg-blend series. Supports dynamic color customization.

Multiple color formats are supported:

• 1. Theme semantic colors, e.g. *-error, *-error-hover
• 2. Tailwind built-in colors, e.g. *-indigo-500
• 3. Raw color values, e.g. *-[#ff0000]
• 4. CSS named colors, e.g. *-[red], *-[green]

Default (primary theme)

bg-blend

Error

bg-blend-error

Success

bg-blend-success

Custom purple

bg-blend-[#7100ff]

Custom blue

bg-blend-[#0017ff]

Corner-placed radial spot dark aurora gradients using bg-aurora series. Spot size and opacity auto-adjust in dark mode.

Multiple color formats are supported:

• 1. Theme semantic colors, e.g. *-error, *-error-hover
• 2. Tailwind built-in colors, e.g. *-indigo-500
• 3. Raw color values, e.g. *-[#ff0000]
• 4. CSS named colors, e.g. *-[red], *-[green]

Default (primary theme)

bg-aurora

Error

bg-aurora-error

Success

bg-aurora-success

Custom purple

bg-aurora-[#7100ff]

Custom blue

bg-aurora-[#0017ff]

Combine a geometric texture on the outer container and a gradient with bg-transparent on the inner container to blend them together.

<div class="bg-grid"><div class="bg-blend bg-transparent"></div></div> <div class="bg-circles"><div class="bg-tint bg-transparent"></div></div> <div class="bg-stripes"><div class="bg-aurora bg-transparent"></div></div>