12 Pure CSS Patterns For Backgrounds – pattern.css

Category: CSS & CSS3 , Recommended | April 24, 2020
0 Comment
Authorbansal-io
Last UpdateApril 24, 2020
LicenseMIT
Tags
,
Views2,386 views
OfficialGo to website
Live DemoDownload
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
$ 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">
  ...
</body>

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

<h1 class="pattern-diagonal-lines-sm text-pattern">
  CSSSCRIPT.COM
</h1>

See Also:

You Might Be Interested In:

Leave a Reply