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-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-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>

Pattern sizes

Use size utilities to control pattern density:

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

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>

Examples

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

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>

Pattern of transparent background

If you want to use a pattern as a background for a transparent element, you can use the bg-pattern-transparent class. It can simulate a transparent background.

<div class="bg-pattern-rectangles p-4">
  <!-- Illustration code here -->
</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.