tabler/docs/content/ui/utilities/background-patterns.md

title, summary, description, added-in, source-css

title	summary	description	added-in	source-css
Background patterns	Use background pattern utilities to add subtle textures to elements. Combine pattern type, color, and size modifiers for different visual effects.	Add decorative background patterns with utility classes.	1.4.0	ui/_patterns.scss

{% assign patterns = "diagonal,diagonal-2,dots,rectangles,lines,lines-vertical,grid,grid-diagonal,blueprint,cross-dots,circles,diagonal-stripes,diagonal-stripes-2,zigzag,vertical-stripes,horizontal-stripes" | split: "," %}

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:

{% for pattern in patterns %}

• .bg-pattern-{{ pattern }} {% endfor %}

Here are the available pattern types:

{% capture html -%}

{% for pattern in patterns %}

.bg-pattern-{{ pattern }}

{% endfor %}

{%- endcapture %} {% capture code %} {% for pattern in patterns -%}

{% endfor %} {% endcapture %} {% include "docs/example.html" html=html code=code bg="surface-primary" %}

Pattern colors

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

{% capture html -%}

{% for color in site.colors %}

.bg-pattern-{{ color[0] }}

{% endfor %}

{%- endcapture %} {% capture code %} {% for color in site.colors -%}

{% endfor %} {% endcapture %} {% include "docs/example.html" html=html code=code bg="surface-primary" %}

Transparent pattern utility

Use .bg-pattern-transparent when you need a checkerboard-style transparent background. This utility comes from the generic background utilities and can be combined with spacing and border classes.

{% capture html -%} {% include "ui/illustration.html" image="boy-with-key.svg" class="d-block mx-auto mw-100" height=200 %} {%- endcapture %} {% capture code %}

{% endcapture %} {% include "docs/example.html" html=html code=code bg="pattern-rectangles" column %}

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:

{% capture html -%}

.bg-pattern-sm

.bg-pattern-md

.bg-pattern-lg

.bg-pattern-xl

{%- endcapture %} {% capture code %}

{% endcapture %} {% include "docs/example.html" html=html code=code bg="surface-primary" %}

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.

{% capture html -%}

Here is example of a card with a background pattern.

{%- endcapture %} {% capture code %}

...

{% endcapture %} {% include "docs/example.html" html=html code=code bg="pattern-diagonal" column %}

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.