Background patterns

Use background pattern utilities to add subtle textures to elements. Combine pattern type, color, and size modifiers for different visual effects.

Overview

Background pattern utilities let you apply decorative, repeatable textures to elements like cards, sections, and placeholders. Start with a pattern type class, then optionally combine it with color and size modifiers.

<div class="bg-pattern-diagonal"></div>
<div class="bg-pattern-grid bg-pattern-primary"></div>
<div class="bg-pattern-circles bg-pattern-lg"></div>

Pattern types

Use one of the available pattern classes to define the shape and direction of the texture:

• .bg-pattern-diagonal
• .bg-pattern-diagonal-2
• .bg-pattern-dots
• .bg-pattern-rectangles
• .bg-pattern-lines
• .bg-pattern-lines-vertical
• .bg-pattern-grid
• .bg-pattern-grid-diagonal
• .bg-pattern-blueprint
• .bg-pattern-cross-dots
• .bg-pattern-circles
• .bg-pattern-diagonal-stripes
• .bg-pattern-diagonal-stripes-2
• .bg-pattern-zigzag
• .bg-pattern-vertical-stripes
• .bg-pattern-horizontal-stripes

Here are the available pattern types:

<div class="bg-pattern-diagonal"></div>
<div class="bg-pattern-diagonal-2"></div>
<div class="bg-pattern-dots"></div>
<div class="bg-pattern-rectangles"></div>
<div class="bg-pattern-lines"></div>
<div class="bg-pattern-lines-vertical"></div>
<div class="bg-pattern-grid"></div>
<div class="bg-pattern-grid-diagonal"></div>
<div class="bg-pattern-blueprint"></div>
<div class="bg-pattern-cross-dots"></div>
<div class="bg-pattern-circles"></div>
<div class="bg-pattern-diagonal-stripes"></div>
<div class="bg-pattern-diagonal-stripes-2"></div>
<div class="bg-pattern-zigzag"></div>
<div class="bg-pattern-vertical-stripes"></div>
<div class="bg-pattern-horizontal-stripes"></div>

Pattern colors

Combine any pattern with color modifiers using .bg-pattern-{color}. See the full list of available colors for all color names.

<div class="bg-pattern-diagonal-stripes-2 bg-pattern-blue"></div>
<div class="bg-pattern-diagonal-stripes-2 bg-pattern-azure"></div>
<div class="bg-pattern-diagonal-stripes-2 bg-pattern-indigo"></div>
<div class="bg-pattern-diagonal-stripes-2 bg-pattern-purple"></div>
<div class="bg-pattern-diagonal-stripes-2 bg-pattern-pink"></div>
<div class="bg-pattern-diagonal-stripes-2 bg-pattern-red"></div>
<div class="bg-pattern-diagonal-stripes-2 bg-pattern-orange"></div>
<div class="bg-pattern-diagonal-stripes-2 bg-pattern-yellow"></div>
<div class="bg-pattern-diagonal-stripes-2 bg-pattern-lime"></div>
<div class="bg-pattern-diagonal-stripes-2 bg-pattern-green"></div>
<div class="bg-pattern-diagonal-stripes-2 bg-pattern-teal"></div>
<div class="bg-pattern-diagonal-stripes-2 bg-pattern-cyan"></div>

Transparent pattern utility

Use .bg-pattern-transparent when you need a checkerboard-style transparent background. Combine it with spacing and border classes. You can change strength with --tblr-pattern-opacity (include the % unit).

<div class="bg-pattern-transparent p-4"></div>

Pattern sizes

Use size utilities to control pattern density:

• .bg-pattern-sm
• .bg-pattern-md
• .bg-pattern-lg
• .bg-pattern-xl

Look at the following examples to see how the pattern sizes work:

<div class="bg-pattern-circles bg-pattern-sm"></div>
<div class="bg-pattern-circles bg-pattern-md"></div>
<div class="bg-pattern-circles bg-pattern-lg"></div>
<div class="bg-pattern-circles bg-pattern-xl"></div>

Pattern opacity

Use opacity utilities to control how strong the texture is:

• .bg-pattern-opacity-lighter
• .bg-pattern-opacity-light
• .bg-pattern-opacity-dark
• .bg-pattern-opacity-darker

<div class="bg-pattern-circles bg-pattern-opacity-lighter"></div>
<div class="bg-pattern-circles bg-pattern-opacity-light"></div>
<div class="bg-pattern-circles bg-pattern-opacity-dark"></div>
<div class="bg-pattern-circles bg-pattern-opacity-darker"></div>

Examples

Look at the following examples to see how background patterns can be used in real layouts.

Card with background pattern

Card with a background pattern in the body can be used to add a decorative touch to the card. This is useful when you want to add a subtle pattern to the card without affecting the readability of the content.

<div class="bg-pattern-diagonal">
  <div class="card">...</div>
</div>

Accessibility

Background patterns are decorative and should never reduce content readability:

• Keep sufficient contrast between text and background.
• Prefer placing patterns on containers around text-heavy content, not directly behind long paragraphs.
• For callouts and alerts, test color and pattern combinations in both light and dark contexts.

Best practices

• Start with .bg-pattern-sm for dense UIs and increase size only when needed.
• Avoid stacking multiple decorative backgrounds in the same section.
• Use strong pattern colors on small surfaces (headers, badges, callouts), and subtler combinations on large sections.

Related