bansal/pattern.css

CSS only library to fill empty background with beautiful patterns.

HTML

3,922

1 commits

updated Mar 26, 2022

bansal.io/pattern-css

See the code

README

pattern.css

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

See the full documentation

Preview

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

bootstrap

css

css3

css-framework

frontend

patterns

Significant stargazers

(top 24 of 25)

Jose Francisco 'Kiko' Verdú Gambín

1,741 followers · starred May 2020

Alexey Pyltsyn

1,272 followers · starred May 2020

Bartlomiej Plotka

1,118 followers · starred Apr 2020

Andrew Lisowski

431 followers · starred Apr 2020

Similar repos

megh-bari/pattern-craft

Professional-grade background patterns and gradients for your websites and apps. Easily copy and…

3,085

css-doodle/css-doodle

A web component for visual art and creative coding

6,059

dbohdan/classless-css

A list of classless CSS themes/frameworks with screenshots

2,384

riccardoscalco/textures

Textures.js is a JavaScript library for creating SVG patterns

6,090

phuocng/csslayout

A collection of popular layouts and patterns made with CSS. Now it has 100+ patterns and continues…

8,043

btmills/geopattern

Generate beautiful SVG patterns

1,842

troxler/awesome-css-frameworks

List of awesome CSS frameworks in 2026

9,540

bradtraversy/design-resources-for-developers

Curated list of design and UI resources from stock photos, web templates, CSS frameworks, UI…

67,140