How to use Background Patterns in Gutenberg using CSS only

Background Patterns are a good way to enhance your page design. In this tutorial, I will guide you with an easy way to use patterns in Gutenberg.

Ready to Use CSS Patterns

I’ve come across a great CSS Patterns Library, and this is what I am going to use in this tutorial. However, you won’t have to install the library or enqueue it.

I have extracted the CSS code for each pattern so that you can use only what you want. below You can check all the available patterns and copy the code for the one you like to you.

Checks

  background-image: repeating-linear-gradient(45deg, currentColor 25%, transparent 25%, transparent 75%, currentColor 75%, currentColor), repeating-linear-gradient(45deg, currentColor 25%, transparent 25%, transparent 75%, currentColor 75%, currentColor);
  background-position: 0 0, 10px 10px;
  background-size: calc(2 * 10px) calc(2 * 10px);
background-image: repeating-linear-gradient(45deg, currentColor 25%, transparent 25%, transparent 75%, currentColor 75%, currentColor), repeating-linear-gradient(45deg, currentColor 25%, transparent 25%, transparent 75%, currentColor 75%, currentColor);
  background-position: 0 0, 25px 25px;
  background-size: calc(2 * 25px) calc(2 * 25px);
background-image: repeating-linear-gradient(45deg, currentColor 25%, transparent 25%, transparent 75%, currentColor 75%, currentColor), repeating-linear-gradient(45deg, currentColor 25%, transparent 25%, transparent 75%, currentColor 75%, currentColor);
  background-position: 0 0, 50px 50px;
  background-size: calc(2 * 50px) calc(2 * 50px);
background-image: repeating-linear-gradient(45deg, currentColor 25%, transparent 25%, transparent 75%, currentColor 75%, currentColor), repeating-linear-gradient(45deg, currentColor 25%, transparent 25%, transparent 75%, currentColor 75%, currentColor);
  background-position: 0 0, 100px 100px;
  background-size: calc(2 * 100px) calc(2 * 100px);

Grids

background-image: linear-gradient(currentColor 1px, transparent 1px), linear-gradient(to right, currentColor 1px, transparent 1px);
  background-size: 10px 10px;
background-image: linear-gradient(currentColor 1px, transparent 1px), linear-gradient(to right, currentColor 1px, transparent 1px);
  background-size: 25px 25px;
background-image: linear-gradient(currentColor 1px, transparent 1px), linear-gradient(to right, currentColor 1px, transparent 1px);
  background-size: 50px 50px;
background-image: linear-gradient(currentColor 1px, transparent 1px), linear-gradient(to right, currentColor 1px, transparent 1px);
  background-size: 100px 100px;

Dots

background-image: radial-gradient(currentColor 0.5px, transparent 0.5px);
  background-size: calc(10 * 0.5px) calc(10 * 0.5px);
background-image: radial-gradient(currentColor 1px, transparent 1px);
  background-size: calc(10 * 1px) calc(10 * 1px);
background-image: radial-gradient(currentColor 1.5px, transparent 1.5px);
  background-size: calc(10 * 1.5px) calc(10 * 1.5px);
background-image: radial-gradient(currentColor 2px, transparent 2px);
  background-size: calc(10 * 2px) calc(10 * 2px);

Cross Dots

background-image: radial-gradient(currentColor 0.5px, transparent 0.5px), radial-gradient(currentColor 0.5px, transparent 0.5px);
  background-size: calc(20 * 0.5px) calc(20 * 0.5px);
  background-position: 0 0, calc(10 * 0.5px) calc(10 * 0.5px);
background-image: radial-gradient(currentColor 1px, transparent 1px), radial-gradient(currentColor 1px, transparent 1px);
  background-size: calc(20 * 1px) calc(20 * 1px);
  background-position: 0 0, calc(10 * 1px) calc(10 * 1px);
background-image: radial-gradient(currentColor 1.5px, transparent 1.5px), radial-gradient(currentColor 1.5px, transparent 1.5px);
  background-size: calc(20 * 1.5px) calc(20 * 1.5px);
  background-position: 0 0, calc(10 * 1.5px) calc(10 * 1.5px);
background-image: radial-gradient(currentColor 2px, transparent 2px), radial-gradient(currentColor 2px, transparent 2px);
  background-size: calc(20 * 2px) calc(20 * 2px);
  background-position: 0 0, calc(10 * 2px) calc(10 * 2px);

Diagonal Lines

background-image: repeating-linear-gradient(45deg, currentColor 0, currentColor 1px, transparent 0, transparent 50%);
  background-size: 10px 10px;
background-image: repeating-linear-gradient(45deg, currentColor 0, currentColor 1px, transparent 0, transparent 50%);
  background-size: 25px 25px;
background-image: repeating-linear-gradient(45deg, currentColor 0, currentColor 1px, transparent 0, transparent 50%);
  background-size: 50px 50px;
background-image: repeating-linear-gradient(45deg, currentColor 0, currentColor 1px, transparent 0, transparent 50%);
  background-size: 100px 100px;

Vertical Lines

background-image: repeating-linear-gradient(to right, currentColor, currentColor 1px, transparent 1px, transparent);
  background-size: 10px 10px;
background-image: repeating-linear-gradient(to right, currentColor, currentColor 1px, transparent 1px, transparent);
  background-size: 25px 25px;
background-image: repeating-linear-gradient(to right, currentColor, currentColor 1px, transparent 1px, transparent);
  background-size: 50px 50px;
background-image: repeating-linear-gradient(to right, currentColor, currentColor 1px, transparent 1px, transparent);
  background-size: 100px 100px;

Horizontal Lines

background-image: repeating-linear-gradient(0deg, currentColor, currentColor 1px, transparent 1px, transparent);
  background-size: 10px 10px;
background-image: repeating-linear-gradient(0deg, currentColor, currentColor 1px, transparent 1px, transparent);
  background-size: 25px 25px;
 background-image: repeating-linear-gradient(0deg, currentColor, currentColor 1px, transparent 1px, transparent);
  background-size: 50px 50px;
background-image: repeating-linear-gradient(0deg, currentColor, currentColor 1px, transparent 1px, transparent);
  background-size: 100px 100px;

Diagonal Stripes

  background: repeating-linear-gradient(45deg, transparent, transparent 10px, currentColor 10px, currentColor calc(2 * 10px));
  background: repeating-linear-gradient(45deg, transparent, transparent 25px, currentColor 25px, currentColor calc(2 * 25px));
  background: repeating-linear-gradient(45deg, transparent, transparent 50px, currentColor 50px, currentColor calc(2 * 50px));
  background: repeating-linear-gradient(45deg, transparent, transparent 100px, currentColor 100px, currentColor calc(2 * 100px));

Vertical Stripes

background-image: linear-gradient(90deg, transparent 50%, currentColor 50%);
  background-size: 10px 10px;
background-image: linear-gradient(90deg, transparent 50%, currentColor 50%);
  background-size: 25px 25px;
background-image: linear-gradient(90deg, transparent 50%, currentColor 50%);
  background-size: 50px 50px;
background-image: linear-gradient(90deg, transparent 50%, currentColor 50%);
  background-size: 100px 100px;

Horizontal Stripes

background-image: linear-gradient(0deg, transparent 50%, currentColor 50%);
  background-size: 10px 10px;
background-image: linear-gradient(0deg, transparent 50%, currentColor 50%);
  background-size: 25px 25px;
background-image: linear-gradient(0deg, transparent 50%, currentColor 50%);
  background-size: 50px 50px;
background-image: linear-gradient(0deg, transparent 50%, currentColor 50%);
  background-size: 100px 100px;

Triangles

background-image: linear-gradient(45deg, currentColor 50%, transparent 50%);
  background-size: 10px 10px;
background-image: linear-gradient(45deg, currentColor 50%, transparent 50%);
  background-size: 25px 25px;
 background-image: linear-gradient(45deg, currentColor 50%, transparent 50%);
  background-size: 50px 50px;
background-image: linear-gradient(45deg, currentColor 50%, transparent 50%);
  background-size: 100px 100px;

Zigzag

background: linear-gradient(135deg, currentColor 25%, transparent 25%) -10px 0, linear-gradient(225deg, currentColor 25%, transparent 25%) -10px 0, linear-gradient(315deg, currentColor 25%, transparent 25%), linear-gradient(45deg, currentColor 25%, transparent 25%);
  background-size: calc(2 * 10px) calc(2 * 10px);
background: linear-gradient(135deg, currentColor 25%, transparent 25%) -25px 0, linear-gradient(225deg, currentColor 25%, transparent 25%) -25px 0, linear-gradient(315deg, currentColor 25%, transparent 25%), linear-gradient(45deg, currentColor 25%, transparent 25%);
  background-size: calc(2 * 25px) calc(2 * 25px);
background: linear-gradient(135deg, currentColor 25%, transparent 25%) -50px 0, linear-gradient(225deg, currentColor 25%, transparent 25%) -50px 0, linear-gradient(315deg, currentColor 25%, transparent 25%), linear-gradient(45deg, currentColor 25%, transparent 25%);
  background-size: calc(2 * 50px) calc(2 * 50px);
background: linear-gradient(135deg, currentColor 25%, transparent 25%) -100px 0, linear-gradient(225deg, currentColor 25%, transparent 25%) -100px 0, linear-gradient(315deg, currentColor 25%, transparent 25%), linear-gradient(45deg, currentColor 25%, transparent 25%);
  background-size: calc(2 * 100px) calc(2 * 100px);

How to use CSS Pattern Background?

Now let’s learn how you can use any of the above patterns as a background to different Gutenberg Blocks.

For the demo, I will copy a Hero template from the Gutenberg Templates Library.

This is how it looks before adding pattern background

Now, I will simply copy the CSS code of a pattern from this post and apply it to the main cover block of this section.

Copy Pattern CSS

Now you need to apply custom CSS code in Gutenberg and for that, we have few options as mentioned in our earlier tutorial. The easiest way is to use the Block CSS plugin which lets you add custom CSS code directly in Gutenberg to any block.

So make sure you have that plugins installed and active. Now select the main cover block (or any block you wish to apply the pattern background). And from the sidebar settings paste the CSS in the custom CSS box.

This is how it looks now after applying the vertical lines pattern.

That is just an example. You may get creative and apply the patterns to different page elements/blocks. For example, you may apply a pattern to buttons. Here is an example of that.

I hope you get the idea.

Use CSS Patterns as Content Separator

Another cool idea would be to use it as a separator between sections. For this, the easiest way I think is to use a cover block and apply the pattern CSS to it.

Here is a page with two sections without any separator.

Now let’s try to add a pattern separator between sections using the spacer block.

Here is the updated version with the pattern used as a separator between sections using the cover block.

That is just a couple of ideas on how to use CSS Background Patterns in Gutenberg. There are more ways you can get creative using these patterns in your page designs.

Hope you find this useful. ?