12 Pure CSS Patterns For Backgrounds – pattern.css

Author: bansal-io
Views Total: 1,685 views
Official Page: Go to website
Last Update: April 24, 2020
License: MIT


12 Pure CSS Patterns For Backgrounds – pattern.css


The pattern.css library provides 12 CSS only, seamless patterns for backgrounds of any containers and even text.

How to use it:

1. Install and download the pattern.css with NPM.

$ npm install pattern.css --save

2. Import the pattern.css.

// ES6
import './pattern.scss';

3. Or load the stylesheet pattern.css in the document.

<!-- From Local -->
<link href="dist/pattern.min.css" rel="stylesheet" />
<!-- From CDN -->
<link href="https://unpkg.com/pattern.css" rel="stylesheet" />

4. Apply a pattern class of your choice to the background of a container element. All possible size parameters: ‘sm’, ‘md’, ‘lg’, or ‘xl’.

  1. pattern-checks-SIZE
  2. pattern-grid-SIZE
  3. pattern-dots-SIZE
  4. pattern-cross-dots-SIZE
  5. pattern-diagonal-lines-SIZE
  6. pattern-horizontal-lines-SIZE
  7. pattern-vertical-lines-SIZE
  8. pattern-diagonal-stripes-SIZE
  9. pattern-horizontal-stripes-SIZE
  10. pattern-vertical-stripes-SIZE
  11. pattern-triangles-SIZE
  12. pattern-zigzag-SIZE
<body class="pattern-zigzag-xl">

5. The library also supports text background using CSS background-clip property.

<h1 class="pattern-diagonal-lines-sm text-pattern">

See also  Get and Set CSS Variables with Javascript

Leave a Reply

Your email address will not be published. Required fields are marked *