Pattern types
Apply a repeating background pattern to any element with a single utility class.
.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
Pattern colors
Tint the pattern with any theme color from the palette.
.bg-pattern-blue
.bg-pattern-azure
.bg-pattern-indigo
.bg-pattern-purple
.bg-pattern-pink
.bg-pattern-red
.bg-pattern-orange
.bg-pattern-yellow
.bg-pattern-lime
.bg-pattern-green
.bg-pattern-teal
.bg-pattern-cyan
Pattern sizes
Scale the pattern from sm to xl.
.bg-pattern-sm
.bg-pattern-md
.bg-pattern-lg
.bg-pattern-xl
Pattern opacity
Scale the pattern strength with lighter, light, dark, or darker.
.bg-pattern-opacity-lighter
.bg-pattern-opacity-light
.bg-pattern-opacity-dark
.bg-pattern-opacity-darker
Usage
Combine pattern type, color, size, and opacity on real layouts.
.bg-pattern-transparent
.bg-pattern-grid.bg-pattern-primary.bg-pattern-lg.bg-pattern-opacity-light
.bg-pattern-diagonal-stripes-2.bg-pattern-azure.bg-pattern-opacity-dark
.bg-pattern-dots.bg-pattern-red.bg-pattern-sm.bg-pattern-opacity-darker
Card with
.bg-pattern-diagonal.Card with a primary grid and
.bg-pattern-opacity-light.