80+ geometric background patterns for TailwindCSS
About
This package allows you to quickly add repeating background patterns to your TailwindCSS projects. We've collected and designed 80+ geometric patterns that can be applied as utility classes in TailwindCSS.
Creators
This package is brought to you by MagmaFlow, we offer unlimited TailwindCSS development for a fixed monthly fee to startups, agencies and freelancers. Find out more here.
Installation
Install the plugin from npm:
npm i tailwindcss-patterns
Setup
Then add the plugin to your tailwind.config.js file:
module.exports = {
theme: {
// ...
},
plugins: [
require('tailwindcss-patterns'),
// ...
],
}
Usage
There are two main classes you can use:
Pattern
Add a background pattern using the following schema pattern-{type}-{color}/{opacity}
.
You can find a list of patterns here.
For example:
<div class="pattern-hive-amber-500/100"...
Scale
You can scale a background pattern, in line with its aspect ratio using the following schema pattern-{type}-scale-{percent}
.
For example:
<div class="pattern-hive-scale-50"...
Scaling options are the same as TailwindCSS's scale options (they can be found here.)
You may want to use a custom scaling multiplier. You can do that using the following schema pattern-{type}-scale-[multiplier]
.
For example:
<div class="pattern-hive-scale-[2.5]"...
Putting it all together
You can combine these classes with a generic background class to create the full effect.
<div class="bg-amber-300 pattern-hive-amber-700/50 pattern-hive-scale-[0.5]"></div>
Pattern types
-
jigsaw
- Live Demo -
ripples
- Live Demo -
topography
- Live Demo -
texture
- Live Demo -
hub
- Live Demo -
architect
- Live Demo -
voxel
- Live Demo -
crosses
- Live Demo -
graph
- Live Demo -
squares
- Live Demo -
falling-triangles
- Live Demo -
pies
- Live Demo -
hexagons
- Live Demo -
zig-zag
- Live Demo -
zig-zag-2
- Live Demo -
autumn
- Live Demo -
temple
- Live Demo -
death-star
- Live Demo -
overlapping-hexagons
- Live Demo -
stars
- Live Demo -
bamboo
- Live Demo -
floor
- Live Demo -
cork-screw
- Live Demo -
kiwi
- Live Demo -
lips
- Live Demo -
checkered
- Live Demo -
x-equals
- Live Demo -
bevel-circle
- Live Demo -
brick-wall
- Live Demo -
fancy-rectangles
- Live Demo -
heavy-rain
- Live Demo -
overlapping-circles
- Live Demo -
plus
- Live Demo -
plus-connected
- Live Demo -
volcano-lamp
- Live Demo -
wiggle
- Live Demo -
bubbles
- Live Demo -
cage
- Live Demo -
connections
- Live Demo -
current
- Live Demo -
diagonal-stripes
- Live Demo -
flipped-diamonds
- Live Demo -
houndstooth
- Live Demo -
leaf
- Live Demo -
lines-in-motion
- Live Demo -
moroccan
- Live Demo -
morphing-diamonds
- Live Demo -
rails
- Live Demo -
rain
- Live Demo -
squares-in-squares
- Live Demo -
stripes
- Live Demo -
tic-tac-toe
- Live Demo -
aztec
- Live Demo -
bank-note
- Live Demo -
boxes
- Live Demo -
circles-and-squares
- Live Demo -
circuit-board
- Live Demo -
curtain
- Live Demo -
clouds
- Live Demo -
eyes
- Live Demo -
tiles
- Live Demo -
groovy
- Live Demo -
intersecting-circles
- Live Demo -
melt
- Live Demo -
overlapping-diamonds
- Live Demo -
wood
- Live Demo -
polka
- Live Demo -
signal
- Live Demo -
slanted
- Live Demo -
lines-diagonal-right
- Live Demo -
lines-diagonal-left
- Live Demo -
lines-horizontal
- Live Demo -
lines-vertical
- Live Demo -
sprinkles
- Live Demo -
waves
- Live Demo -
hive
- Live Demo -
squiggles
- Live Demo -
triangles
- Live Demo -
grid
- Live Demo -
zebra
- Live Demo
Credits
This package couldn't have been put together without patterns from: