Recently, I have been looking at Miro Website and I was amazed by their design, choice of fonts, colors everything was perfect, however, one thing that stood out for me was the background grid.

Soon, I saw this on some other site, and then another. I want to understand how they are doing it, one obvious answer is that they have one svg added to the background, with size: cover, but then I find out an even better way; Linear Gradient.

Linear Gradient, as the name suggests are a way to add gradients to your website. However, this is not the complete truth about linear gradient, as it turns out you can do all crazy and weird stuff with this property including adding these grids to your site.

Code

body {
  background-color: #282c35;
  background-image: linear-gradient(#ffc4a715, 0.1rem, transparent 0.1rem),
    linear-gradient(90deg, #ffc4a715 0.1rem, transparent 0.1rem);
  background-size: 3.5rem 3.5rem;
  color: #fefefe;
}

Its just these few lines and you will have a background grid to whatever section you want to add it to.

Code Explaination:

• background-image: linear-gradient(#ffc4a715, 0.1rem, transparent 0.1rem), linear-gradient(90deg, #ffc4a715 0.1rem, transparent 0.1rem);: This line defines two background images using CSS gradients. Gradients are smooth transitions between two or more colors.

• The first gradient linear-gradient(#ffc4a715, 0.1rem, transparent 0.1rem) creates a vertical gradient that starts with a semi-transparent yellow color (#ffc4a715) at the top and transitions to transparent over a distance of 0.1rem.

• The second gradient linear-gradient(90deg, #ffc4a715 0.1rem, transparent 0.1rem) creates a horizontal gradient that starts with the same semi-transparent yellow color at the left and transitions to transparent over a distance of 0.1rem.

• Both gradients are combined using the comma (,) separator.

• background-size: 3.5rem 3.5rem;: This line specifies the size of the background images. Each image will have a width and height of 3.5rem. This means that each color segment in the gradient will repeat at intervals of 3.5rem, creating a pattern on the background.

And that's it. You can play with these values, add different angles, multipe gradients to achieve all kind of different patterns here, so what are you waiting for, go ahead and create some beautiful patterns.

You can view it in action here at my blog