pattern.css

CSS only library to fill your empty background with beautiful patterns.

Download (< 1kb gzip)

Star

Installation

1. pattern.css is available via npm

npm install pattern.css

2. Or you can use cdn unpkg

<link href="https://unpkg.com/pattern.css" rel="stylesheet">

3. Or Download and include in head

<link href="dist/pattern.min.css" rel="stylesheet">

Usage

Examples in documentation are built using shorthand framework but this library works with most of the frameworks including bootstrap.

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 shorthand framework

<div class="pattern-checks-sm bg-blue white">...</div>

With bootstrap framework

<div class="pattern-checks-sm bg-primary text-white">...</div>

Size

Each pattern is available in 4 sizes sm, md, lg, and xl

.pattern-diagonal-stripes-sm

.pattern-diagonal-stripes-md

.pattern-diagonal-stripes-lg

.pattern-diagonal-stripes-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

pattern.css library depend on four css properties linear-gradient, radial-gradient, repeating-linear-gradient and repeating-radial-gradient
which are supported by most browsers. You can check caniuse.com

Examples

Hero

Make Your Website
More Beautiful

by using these simple pattern

Learn More

Separator

Use pattern class and set separator height. Example; pattern .pattern-dots-sm, height .h-5 and color .slategray

<div class="pattern-dots-sm slategray 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 bg-mint white text-pattern">PLAY</h3>

NEXT BEST TEXT

Text container pattern

<div class="pattern-dots-md red text-pattern max-w-20pc overflow-visible">
    <h1 class="white">NEXT BEST TEXT</h1>
</div>

Image Container

Use with image

<div class="pattern-dots-md gray-light">
<img style="transform:translate(10px, -10px);" src="..."/>
</div>

Another pattern with image

<div class="pattern-diagonal-lines-sm gray-lighter">
<img style="transform:translate(30px, 30px);" src="..."/>
</div>

Patterns

checks

.pattern-checks-sm

.pattern-checks-md

.pattern-checks-lg

.pattern-checks-xl

grid

.pattern-grid-sm

.pattern-grid-md

.pattern-grid-lg

.pattern-grid-xl

dots

.pattern-dots-sm

.pattern-dots-md

.pattern-dots-lg

.pattern-dots-xl

cross-dots

.pattern-cross-dots-sm

.pattern-cross-dots-md

.pattern-cross-dots-lg

.pattern-cross-dots-xl

diagonal-lines

.pattern-diagonal-lines-sm

.pattern-diagonal-lines-md

.pattern-diagonal-lines-lg

.pattern-diagonal-lines-xl

vertical-lines

.pattern-vertical-lines-sm

.pattern-vertical-lines-md

.pattern-vertical-lines-lg

.pattern-vertical-lines-xl

horizontal-lines

.pattern-horizontal-lines-sm

.pattern-horizontal-lines-md

.pattern-horizontal-lines-lg

.pattern-horizontal-lines-xl

diagonal-stripes

.pattern-diagonal-stripes-sm

.pattern-diagonal-stripes-md

.pattern-diagonal-stripes-lg

.pattern-diagonal-stripes-xl

vertical-stripes

.pattern-vertical-stripes-sm

.pattern-vertical-stripes-md

.pattern-vertical-stripes-lg

.pattern-vertical-stripes-xl

horizontal-stripes

.pattern-horizontal-stripes-sm

.pattern-horizontal-stripes-md

.pattern-horizontal-stripes-lg

.pattern-horizontal-stripes-xl

triangles

.pattern-triangles-sm

.pattern-triangles-md

.pattern-triangles-lg

.pattern-triangles-xl

zigzag

.pattern-zigzag-sm

.pattern-zigzag-md

.pattern-zigzag-lg

.pattern-zigzag-xl