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.
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?
Buy me a coffee
👋 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.
