pattern.css
CSS only library to fill your empty background with beautiful patterns.
Tailwind CSS Installation
Checkout the repository for tailwindcss plugin
npm install -D tailwindcss-pattern
@import "tailwindcss"
@plugin "tailwindcss-pattern"
Usage
There are many possible designs that can be built with css to use as patterns but I have made only few styles that are commonly seen in many award winning website.
Any background pattern works with two or more colors. I made with library with considering two color patterns only.
Colors
pattern.css is built with two colors only transparent and currentColor.
currentColor is the current active text color inside a element. To change the color just change the text color property.
To change the another color just change the background color, and background color will be visible through transparent color
Example
With Tailwind css<div class="pattern-checks-sm bg-blue-500 text-white">...</div>
<div class="pattern-checks-sm bg-primary text-white">...</div>
Size
Each pattern is available in 4 sizes sm, md, lg, and xl
Class
| small | medium | large | extra large |
pattern-checks-sm | pattern-checks-md | pattern-checks-lg | pattern-checks-xl |
pattern-grid-sm | pattern-grid-md | pattern-grid-lg | pattern-grid-xl |
pattern-dots-sm | pattern-dots-md | pattern-dots-lg | pattern-dots-xl |
pattern-cross-dots-sm | pattern-cross-dots-md | pattern-cross-dots-lg | pattern-cross-dots-xl |
pattern-diagonal-lines-sm | pattern-diagonal-lines-md | pattern-diagonal-lines-lg | pattern-diagonal-lines-xl |
pattern-horizontal-lines-sm | pattern-horizontal-lines-md | pattern-horizontal-lines-lg | pattern-horizontal-lines-xl |
pattern-vertical-lines-sm | pattern-vertical-lines-md | pattern-vertical-lines-lg | pattern-vertical-lines-xl |
pattern-diagonal-stripes-sm | pattern-diagonal-stripes-md | pattern-diagonal-stripes-lg | pattern-diagonal-stripes-xl |
pattern-horizontal-stripes-sm | pattern-horizontal-stripes-md | pattern-horizontal-stripes-lg | pattern-horizontal-stripes-xl |
pattern-vertical-stripes-sm | pattern-vertical-stripes-md | pattern-vertical-stripes-lg | pattern-vertical-stripes-xl |
pattern-triangles-sm | pattern-triangles-md | pattern-triangles-lg | pattern-triangles-xl |
pattern-zigzag-sm | pattern-zigzag-md | pattern-zigzag-lg | pattern-zigzag-xl |
Browser Support
linear-gradient, radial-gradient, repeating-linear-gradient and repeating-radial-gradient which are supported by most browsers. You can check caniuse.com
Examples
Hero Section
Separator
Use pattern class and set PatternSeparator height. Example; pattern .pattern-dots-sm, height .h-5 and color .slate
<div class="pattern-dots-sm text-slate-500 h-5"></div>
Text pattern
PLAY
Fill text with pattern
Use .text-pattern class with background patterns to set text color as pattern
<h3 class="pattern-checks-sm text-pattern bg-green-300 text-white">PLAY</h3>
NEXT BEST TEXT
Text container pattern
<div class="pattern-dots-md text-red-500 text-pattern max-w-20pc overflow-visible">
<h1 class="text-white">NEXT BEST TEXT</h1>
</div>
Image Container
Use with image
<div class="pattern-dots-md gray-400">
<img class="translate-x-8 translate-y-8" src="..."/>
</div>
Another pattern with image
<div class="pattern-diagonal-lines-sm gray-lighter">
<img style="transform:translate(30px, 30px);" src="..."/>
</div>