Articles /Pin to ProfileBookmark

How to design a grid pattern background with CSS

Aug 11, 2022  •  @sayzlim  •  10,000
Copy linkTweet this

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 1px, transparent calc(50% + 1px) 100%),
        linear-gradient(to right, transparent calc(50% - 1px), #fff 1px, transparent calc(50% + 1px) 100%);
    background-size: 100% 100%, 2vw 2vw, 2vw 2vw;
}

References:

CSS
×

Success!

Help @sayzlim spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with Github
about: ({
version: 0.1.6 BETA 11.29,
whats_new: article editor v2,
up_next: tip code demos,
coming_soon: embeddable tipping,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.6,
notes: article editor refresh

version: 0.1.5,
notes: added pins + new badge

version: 0.1.4,
notes: home refresh + tools

version: 0.1.3,
notes: added reference + demos
)...
recent_tips: (
tipper: @dert,
amount: 1000 SATS,
source: article

tipper: Anonymous,
amount: 1000 SATS,
source: article

tipper: @Loverboylove,
amount: 500 SATS,
source: article
)...