Published at
Updated at
Reading time

A month ago, I was searching for a CSS generator to create a CSS grid background for a blog post component. ๐Ÿ‘‡

Article component with controls to choose units and a writing mode.

I knew creating this CSS effect wouldn't be too hard, but fiddling with CSS gradients is not my strong suit. Unfortunately, my Google foo failed me. And if your search terms include "CSS" and "grid" you'll get only tutorials to use and create "CSS grids". ๐Ÿคฆโ€โ™‚๏ธ

The only solution was to tweak random Codepens, and I spent a good half an hour creating vertical and horizontal lines in CSS.

So! If you, dear reader, are on the hunt for a quick CSS background grid generator, you reached your final destination!

Here's my contribution to the internet. ๐Ÿ‘‡

.background-grid {
  background-image: linear-gradient(#1c7cbb 1.5px, transparent 1.5px, transparent calc(100% - 1.5px), #1c7cbb calc(100% - 1.5px)), linear-gradient(90deg, #1c7cbb 1.5px, transparent 1.5px, transparent calc(100% - 1.5px), #1c7cbb calc(100% - 1.5px));
  background-size: 10% 10%;
  border: 1.5px solid #1c7cbb;
Was this post helpful?
Yes? Cool! You might want to check out Web Weekly for more web development articles. The last edition went out 8 days ago.
Stefan standing in the park in front of a green background

About Stefan Judis

Frontend nerd with over ten years of experience, freelance dev, "Today I Learned" blogger, conference speaker, and Open Source maintainer.

Related Topics

Related Articles