How to design a grid pattern background with CSS

@sayzlim • 11,250

Tip the AuthorCopy linkTweet this

Aug 11.2022

One of the techniques to make your site look better is adding a background pattern. I particularly like the squared notebook pattern found in Moleskine. It also creates a beautiful background if you layer it with a gradient image. Here is how you can do it with CSS.

body {
    height: 100vh;
    background: #111;
    background-image: linear-gradient(
            35deg,
            hsla(0, 0%, 7%, 1),
            80%,
            hsla(0, 0%, 7%, 0.8)
        ),
        linear-gradient(#bbb 1px, transparent 0),
        linear-gradient(90deg, #bbb 1px, transparent 0);
    background-size: 100% 100%, 2vw 2vw, 2vw 2vw;
}

See the Pen
Squared Patterns Background CSS by Sayz Lim (@sayzlim)
on CodePen.

The background-image property is only known for displaying images, but you can also use CSS image functions to create an image. We can also layer multiple images to create an effect where the gradient gradually uncovers the grid patterns.

The background-image above is made from three layers:

background-image: linear-gradient(
        35deg,
        hsla(0, 0%, 7%, 1),
        80%,
        hsla(0, 0%, 7%, 0.8)
    ),
    linear-gradient(#bbb 1px, transparent 0),
    linear-gradient(90deg, #bbb 1px, transparent 0);

• The first layer is the linear gradient to expose grid patterns created by the underneath layers gradually.
• The second layer creates a horizontal line. You can take advantage of color stop by using any acceptable lengths in CSS. We’ve set the gradient to stop at one pixel and the rest of the image as transparent.
• The third layer creates a vertical line by setting the angle to 90deg. You can also use to right as the value.

background-size: 100% 100%, 2vw 2vw, 2vw 2vw;

After creating these background images, we want to set the size of each image with background-size. We set the first layer to 100% because we want to fill the body container completely. Then we set the same size for the square — use 20px instead of 2vw if you want the dimension to stay fixed.

If you want the background to start at 50% of each square, you can play around with the color stops. Here is a modified version.

body {
    height: 100vh;
    background: #111;
    background-image: linear-gradient(
            35deg,
            hsla(0, 0%, 7%, 1),
            80%,
            hsla(0, 0%, 7%, 0.6)
        ),
        linear-gradient(transparent calc(50% - 1px), #fff 50%, transparent calc(50% + 1px) 100%),
        linear-gradient(to right, transparent calc(50% - 1px), #fff 50%, transparent calc(50% + 1px) 100%);
    background-size: 100% 100%, 2vw 2vw, 2vw 2vw;
}

References:

• CSS Image Functions – CSS: Cascading Style Sheets | MDN
• <length> – CSS: Cascading Style Sheets | MDN