2d / pattern.css

CSS only library to fill empty background with beautiful patterns.

pattern.css

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

See the full documentation

Features

• Only CSS. No JavaScript!
• < 1KB minified and gzipped!
• Supports all modern browsers
• Built Using SCSS.
• Full color control.

Installation

via npm

npm install pattern.css

via cdn

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

download

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

Usage

pattern.css can be used with any css framework.

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>

Pattern Classes

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

License

MIT