CSS only library to fill your empty background with beautiful patterns.
See the full documentation
- Only CSS. No JavaScript!
- < 1KB minified and gzipped!
- Supports all modern browsers
- Built Using SCSS.
- Full color control.
npm install pattern.css
<link href="https://unpkg.com/pattern.css" rel="stylesheet">
<link href="dist/pattern.min.css" rel="stylesheet">
pattern.css can be used with any css framework.
<div class="pattern-checks-sm bg-blue white">...</div>
<div class="pattern-checks-sm bg-primary text-white">...</div>
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 |
MIT