Artboard 16light, inspiration, solution, idea, innovation,ionicons-v5_logosGoogle Sheets iconSwift icon
Published at
Updated at
Reading time
1min

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 3 days ago.

Related Topics

Related Articles