Background Pattern
Use the patterns from Hero Patterns as Tailwind CSS utilities.
| Class | Styles |
|---|---|
bg-pattern-<pattern-name>-<theme-color> | background-image: url("...") |
bg-pattern-<pattern-name>-[<arbitrary-value>] | background-image: <arbitrary-value> |
Examples
Jigsaw
<div class="bg-pattern-jigsaw-gray-700 h-48 bg-center shadow-[inset_0_0_1rem_1rem_var(--sl-color-black)]"></div>Overcast
<div class="bg-pattern-overcast-gray-700 h-48 bg-center shadow-[inset_0_0_1rem_1rem_var(--sl-color-black)]"></div>Formal Invitation
<div class="bg-pattern-formal-invitation-gray-700 h-48 bg-center shadow-[inset_0_0_1rem_1rem_var(--sl-color-black)]"></div>Topography
<div class="bg-pattern-topography-gray-700 h-48 bg-center shadow-[inset_0_0_1rem_1rem_var(--sl-color-black)]"></div>Texture
<div class="bg-pattern-texture-gray-700 h-48 bg-center shadow-[inset_0_0_1rem_1rem_var(--sl-color-black)]"></div>Jupiter
<div class="bg-pattern-jupiter-gray-700 h-48 bg-center shadow-[inset_0_0_1rem_1rem_var(--sl-color-black)]"></div>Architect
<div class="bg-pattern-architect-gray-700 h-48 bg-center shadow-[inset_0_0_1rem_1rem_var(--sl-color-black)]"></div>Cutout
<div class="bg-pattern-cutout-gray-700 h-48 bg-center shadow-[inset_0_0_1rem_1rem_var(--sl-color-black)]"></div>Hideout
<div class="bg-pattern-hideout-gray-700 h-48 bg-center shadow-[inset_0_0_1rem_1rem_var(--sl-color-black)]"></div>Graph Paper
<div class="bg-pattern-graph-paper-gray-700 h-48 bg-center shadow-[inset_0_0_1rem_1rem_var(--sl-color-black)]"></div>YYY
<div class="bg-pattern-yyy-gray-700 h-48 bg-center shadow-[inset_0_0_1rem_1rem_var(--sl-color-black)]"></div>Squares
<div class="bg-pattern-squares-gray-700 h-48 bg-center shadow-[inset_0_0_1rem_1rem_var(--sl-color-black)]"></div>Falling Triangles
<div class="bg-pattern-falling-triangles-gray-700 h-48 bg-center shadow-[inset_0_0_1rem_1rem_var(--sl-color-black)]"></div>Piano Man
<div class="bg-pattern-piano-man-gray-700 h-48 bg-center shadow-[inset_0_0_1rem_1rem_var(--sl-color-black)]"></div>Pie Factory
<div class="bg-pattern-pie-factory-gray-700 h-48 bg-center shadow-[inset_0_0_1rem_1rem_var(--sl-color-black)]"></div>Dominos
<div class="bg-pattern-dominos-gray-700 h-48 bg-center shadow-[inset_0_0_1rem_1rem_var(--sl-color-black)]"></div>Hexagons
<div class="bg-pattern-hexagons-gray-700 h-48 bg-center shadow-[inset_0_0_1rem_1rem_var(--sl-color-black)]"></div>Charlie Brown
<div class="bg-pattern-charlie-brown-gray-700 h-48 bg-center shadow-[inset_0_0_1rem_1rem_var(--sl-color-black)]"></div>Autumn
<div class="bg-pattern-autumn-gray-700 h-48 bg-center shadow-[inset_0_0_1rem_1rem_var(--sl-color-black)]"></div>Temple
<div class="bg-pattern-temple-gray-700 h-48 bg-center shadow-[inset_0_0_1rem_1rem_var(--sl-color-black)]"></div>Stamp Collection
<div class="bg-pattern-stamp-collection-gray-700 h-48 bg-center shadow-[inset_0_0_1rem_1rem_var(--sl-color-black)]"></div>Death Star
<div class="bg-pattern-death-star-gray-700 h-48 bg-center shadow-[inset_0_0_1rem_1rem_var(--sl-color-black)]"></div>Church on Sunday
<div class="bg-pattern-church-on-sunday-gray-700 h-48 bg-center shadow-[inset_0_0_1rem_1rem_var(--sl-color-black)]"></div>I Like Food
<div class="bg-pattern-i-like-food-gray-700 h-48 bg-center shadow-[inset_0_0_1rem_1rem_var(--sl-color-black)]"></div>Overlapping Hexagons
<div class="bg-pattern-overlapping-hexagons-gray-700 h-48 bg-center shadow-[inset_0_0_1rem_1rem_var(--sl-color-black)]"></div>4 Point Stars
<div class="bg-pattern-4-point-stars-gray-700 h-48 bg-center shadow-[inset_0_0_1rem_1rem_var(--sl-color-black)]"></div>Bamboo
<div class="bg-pattern-bamboo-gray-700 h-48 bg-center shadow-[inset_0_0_1rem_1rem_var(--sl-color-black)]"></div>Bathroom Floor
<div class="bg-pattern-bathroom-floor-gray-700 h-48 bg-center shadow-[inset_0_0_1rem_1rem_var(--sl-color-black)]"></div>Cork Screw
<div class="bg-pattern-cork-screw-gray-700 h-48 bg-center shadow-[inset_0_0_1rem_1rem_var(--sl-color-black)]"></div>Happy Intersection
<div class="bg-pattern-happy-intersection-gray-700 h-48 bg-center shadow-[inset_0_0_1rem_1rem_var(--sl-color-black)]"></div>Kiwi
<div class="bg-pattern-kiwi-gray-700 h-48 bg-center shadow-[inset_0_0_1rem_1rem_var(--sl-color-black)]"></div>Lips
<div class="bg-pattern-lips-gray-700 h-48 bg-center shadow-[inset_0_0_1rem_1rem_var(--sl-color-black)]"></div>Lisbon
<div class="bg-pattern-lisbon-gray-700 h-48 bg-center shadow-[inset_0_0_1rem_1rem_var(--sl-color-black)]"></div>Random Shapes
<div class="bg-pattern-random-shapes-gray-700 h-48 bg-center shadow-[inset_0_0_1rem_1rem_var(--sl-color-black)]"></div>Steel Beams
<div class="bg-pattern-steel-beams-gray-700 h-48 bg-center shadow-[inset_0_0_1rem_1rem_var(--sl-color-black)]"></div>Tiny Checkers
<div class="bg-pattern-tiny-checkers-gray-700 h-48 bg-center shadow-[inset_0_0_1rem_1rem_var(--sl-color-black)]"></div>X Equals
<div class="bg-pattern-x-equals-gray-700 h-48 bg-center shadow-[inset_0_0_1rem_1rem_var(--sl-color-black)]"></div>Anchors Away
<div class="bg-pattern-anchors-away-gray-700 h-48 bg-center shadow-[inset_0_0_1rem_1rem_var(--sl-color-black)]"></div>Bevel Circle
<div class="bg-pattern-bevel-circle-gray-700 h-48 bg-center shadow-[inset_0_0_1rem_1rem_var(--sl-color-black)]"></div>Brick Wall
<div class="bg-pattern-brick-wall-gray-700 h-48 bg-center shadow-[inset_0_0_1rem_1rem_var(--sl-color-black)]"></div>Fancy Rectangles
<div class="bg-pattern-fancy-rectangles-gray-700 h-48 bg-center shadow-[inset_0_0_1rem_1rem_var(--sl-color-black)]"></div>Heavy Rain
<div class="bg-pattern-heavy-rain-gray-700 h-48 bg-center shadow-[inset_0_0_1rem_1rem_var(--sl-color-black)]"></div>Overlapping Circles
<div class="bg-pattern-overlapping-circles-gray-700 h-48 bg-center shadow-[inset_0_0_1rem_1rem_var(--sl-color-black)]"></div>Plus
<div class="bg-pattern-plus-gray-700 h-48 bg-center shadow-[inset_0_0_1rem_1rem_var(--sl-color-black)]"></div>Rounded Plus Connected
<div class="bg-pattern-rounded-plus-connected-gray-700 h-48 bg-center shadow-[inset_0_0_1rem_1rem_var(--sl-color-black)]"></div>Volcano Lamp
<div class="bg-pattern-volcano-lamp-gray-700 h-48 bg-center shadow-[inset_0_0_1rem_1rem_var(--sl-color-black)]"></div>Wiggle
<div class="bg-pattern-wiggle-gray-700 h-48 bg-center shadow-[inset_0_0_1rem_1rem_var(--sl-color-black)]"></div>Bubbles
<div class="bg-pattern-bubbles-gray-700 h-48 bg-center shadow-[inset_0_0_1rem_1rem_var(--sl-color-black)]"></div>Cage
<div class="bg-pattern-cage-gray-700 h-48 bg-center shadow-[inset_0_0_1rem_1rem_var(--sl-color-black)]"></div>Connections
<div class="bg-pattern-connections-gray-700 h-48 bg-center shadow-[inset_0_0_1rem_1rem_var(--sl-color-black)]"></div>Current
<div class="bg-pattern-current-gray-700 h-48 bg-center shadow-[inset_0_0_1rem_1rem_var(--sl-color-black)]"></div>Diagonal Stripes
<div class="bg-pattern-diagonal-stripes-gray-700 h-48 bg-center shadow-[inset_0_0_1rem_1rem_var(--sl-color-black)]"></div>Flipped Diamonds
<div class="bg-pattern-flipped-diamonds-gray-700 h-48 bg-center shadow-[inset_0_0_1rem_1rem_var(--sl-color-black)]"></div>Floating Cogs
<div class="bg-pattern-floating-cogs-gray-700 h-48 bg-center shadow-[inset_0_0_1rem_1rem_var(--sl-color-black)]"></div>Glamorous
<div class="bg-pattern-glamorous-gray-700 h-48 bg-center shadow-[inset_0_0_1rem_1rem_var(--sl-color-black)]"></div>Houndstooth
<div class="bg-pattern-houndstooth-gray-700 h-48 bg-center shadow-[inset_0_0_1rem_1rem_var(--sl-color-black)]"></div>Leaf
<div class="bg-pattern-leaf-gray-700 h-48 bg-center shadow-[inset_0_0_1rem_1rem_var(--sl-color-black)]"></div>Lines in Motion
<div class="bg-pattern-lines-in-motion-gray-700 h-48 bg-center shadow-[inset_0_0_1rem_1rem_var(--sl-color-black)]"></div>Moroccan
<div class="bg-pattern-moroccan-gray-700 h-48 bg-center shadow-[inset_0_0_1rem_1rem_var(--sl-color-black)]"></div>Morphing Diamonds
<div class="bg-pattern-morphing-diamonds-gray-700 h-48 bg-center shadow-[inset_0_0_1rem_1rem_var(--sl-color-black)]"></div>Rails
<div class="bg-pattern-rails-gray-700 h-48 bg-center shadow-[inset_0_0_1rem_1rem_var(--sl-color-black)]"></div>Rain
<div class="bg-pattern-rain-gray-700 h-48 bg-center shadow-[inset_0_0_1rem_1rem_var(--sl-color-black)]"></div>Skulls
<div class="bg-pattern-skulls-gray-700 h-48 bg-center shadow-[inset_0_0_1rem_1rem_var(--sl-color-black)]"></div>Squares in Squares
<div class="bg-pattern-squares-in-squares-gray-700 h-48 bg-center shadow-[inset_0_0_1rem_1rem_var(--sl-color-black)]"></div>Stripes
<div class="bg-pattern-stripes-gray-700 h-48 bg-center shadow-[inset_0_0_1rem_1rem_var(--sl-color-black)]"></div>Tic Tac Toe
<div class="bg-pattern-tic-tac-toe-gray-700 h-48 bg-center shadow-[inset_0_0_1rem_1rem_var(--sl-color-black)]"></div>Zig Zag
<div class="bg-pattern-zig-zag-gray-700 h-48 bg-center shadow-[inset_0_0_1rem_1rem_var(--sl-color-black)]"></div>Aztec
<div class="bg-pattern-aztec-gray-700 h-48 bg-center shadow-[inset_0_0_1rem_1rem_var(--sl-color-black)]"></div>Bank Note
<div class="bg-pattern-bank-note-gray-700 h-48 bg-center shadow-[inset_0_0_1rem_1rem_var(--sl-color-black)]"></div>Boxes
<div class="bg-pattern-boxes-gray-700 h-48 bg-center shadow-[inset_0_0_1rem_1rem_var(--sl-color-black)]"></div>Circles & Squares
<div class="bg-pattern-circles-and-squares-gray-700 h-48 bg-center shadow-[inset_0_0_1rem_1rem_var(--sl-color-black)]"></div>Circuit Board
<div class="bg-pattern-circuit-board-gray-700 h-48 bg-center shadow-[inset_0_0_1rem_1rem_var(--sl-color-black)]"></div>Curtain
<div class="bg-pattern-curtain-gray-700 h-48 bg-center shadow-[inset_0_0_1rem_1rem_var(--sl-color-black)]"></div>Diagonal Lines
<div class="bg-pattern-diagonal-lines-gray-700 h-48 bg-center shadow-[inset_0_0_1rem_1rem_var(--sl-color-black)]"></div>Endless Clouds
<div class="bg-pattern-endless-clouds-gray-700 h-48 bg-center shadow-[inset_0_0_1rem_1rem_var(--sl-color-black)]"></div>Eyes
<div class="bg-pattern-eyes-gray-700 h-48 bg-center shadow-[inset_0_0_1rem_1rem_var(--sl-color-black)]"></div>Floor Tile
<div class="bg-pattern-floor-tile-gray-700 h-48 bg-center shadow-[inset_0_0_1rem_1rem_var(--sl-color-black)]"></div>Groovy
<div class="bg-pattern-groovy-gray-700 h-48 bg-center shadow-[inset_0_0_1rem_1rem_var(--sl-color-black)]"></div>Intersecting Circles
<div class="bg-pattern-intersecting-circles-gray-700 h-48 bg-center shadow-[inset_0_0_1rem_1rem_var(--sl-color-black)]"></div>Melt
<div class="bg-pattern-melt-gray-700 h-48 bg-center shadow-[inset_0_0_1rem_1rem_var(--sl-color-black)]"></div>Overlapping Diamonds
<div class="bg-pattern-overlapping-diamonds-gray-700 h-48 bg-center shadow-[inset_0_0_1rem_1rem_var(--sl-color-black)]"></div>Parkay Floor
<div class="bg-pattern-parkay-floor-gray-700 h-48 bg-center shadow-[inset_0_0_1rem_1rem_var(--sl-color-black)]"></div>Pixel Dots
<div class="bg-pattern-pixel-dots-gray-700 h-48 bg-center shadow-[inset_0_0_1rem_1rem_var(--sl-color-black)]"></div>Polka Dots
<div class="bg-pattern-polka-dots-gray-700 h-48 bg-center shadow-[inset_0_0_1rem_1rem_var(--sl-color-black)]"></div>Signal
<div class="bg-pattern-signal-gray-700 h-48 bg-center shadow-[inset_0_0_1rem_1rem_var(--sl-color-black)]"></div>Slanted Stars
<div class="bg-pattern-slanted-stars-gray-700 h-48 bg-center shadow-[inset_0_0_1rem_1rem_var(--sl-color-black)]"></div>Wallpaper
<div class="bg-pattern-wallpaper-gray-700 h-48 bg-center shadow-[inset_0_0_1rem_1rem_var(--sl-color-black)]"></div>