Get "PHP 8 in a Nuthshell" (Now comes with PHP 8.3)
Amit Merchant

Amit Merchant

A blog on PHP, JavaScript, and more

Checkered background using two lines of code in CSS

I have a long list of personal blogs that I have been maintaining in my RSS reader. And one of the blogs in this list is Rach Smith’s digital garden.

I have been following her blog for a while now and I like the way she writes. She has a very unique style of writing and her posts are always very insightful.

But one thing I just couldn’t get over was her blog’s background. It was a subtle checkered background and I always wondered that it might be some SVG trickery or something. But, I was wrong.

Rach Smith's digital garden

After a little digging, I have found out that it’s just a simple CSS trick that she is using to create the checkered background. And I thought it would be a good idea to share it with you guys as well.

So, here’s how you can create a checkered background using only two lines of code in CSS.

body {
  background-image: linear-gradient(#727272 1.1px,transparent 1.1px),linear-gradient(to right,#444444 1.1px,#fffbdd 1.1px);
  background-size: 22px 22px;
}

As you can tell, this trick involves the use of linear gradients and background-size properties. The two linear gradients here are configured in such a way that they create a checkered pattern.

You can play around with the colors of these gradients to create a checkered pattern of your choice.

The background-size property is used to adjust the size of a square in the checkered pattern. So, if you want to increase the size of the square, you can increase the value of the background-size property.

Here’s a demo of the above CSS code in action.

See the Pen Checkers background using linear gradients by Amit Merchant (@amit_merchant) on CodePen.

Alternatively, we can also replicate the same effect using the conic-gradient as well which makes it even shorter! Thanks to Temani Afif’s suggestion.

body {
  background: conic-gradient(from 90deg at 1.1px 1.1px, #fffbdd 25%,#444444 0);
  background-size: 22px 22px;
}

Like this article? Consider leaving a

Tip

👋 Hi there! I'm Amit. I write articles about all things web development. You can become a sponsor on my blog to help me continue my writing journey and get your brand in front of thousands of eyes.

Comments?