Crafting grid and dot backgrounds with CSS and Tailwind CSS

I have recently created a website to curate a collection of modern CSS backgrounds: https://bg.ibelick.com.

Today I want to explain two techniques used in this projects: how to create a grid and a dot background with CSS and Tailwind CSS. I like the idea of building it with CSS so that it can be easily customized and used in different projects.

Grid background

For Tailwind CSS the code look like:

GridTailwindCSS.html

<div
  class="absolute inset-0 h-full w-full bg-white bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:24px_24px]"
></div>

And for the CSS:

GridCSS.css

.grid {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  background-image: linear-gradient(to right, #80808012 1px, transparent 1px),
    linear-gradient(to bottom, #80808012 1px, transparent 1px);
  background-size: 24px 24px;
}

The idea behind the magic:

We create two linear gradients, one for the horizontal lines and one for the vertical lines. We use the same color for the lines and the background so that the lines are transparent.
We repeat the gradient every 24px.

And that's it! We have a grid background.

Dot background

For Tailwind CSS the code look like:

DotTailwindCSS.html

<div
  class="absolute inset-0 h-full w-full bg-white bg-[radial-gradient(#e5e7eb_1px,transparent_1px)] [background-size:16px_16px]"
></div>

And for the CSS:

DotCSS.css

.dot {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  background-image: radial-gradient(#e5e7eb 1px, transparent 1px);
  background-size: 16px 16px;
}

The dot background is kind of the same logic as the grid background. We use a radial gradient to create an infinite grid of dots.

Bonus: Mask

Some time we don't want the background to be infinite. So we can use a mask to hide the part we don't want to see.

For Tailwind CSS the code look like:

DotTailwindCSSMask.html

<div
  class="absolute inset-0 h-full w-full bg-white bg-[radial-gradient(#e5e7eb_1px,transparent_1px)] [background-size:16px_16px] [mask-image:radial-gradient(ellipse_50%_50%_at_50%_50%,#000_60%,transparent_100%)]"
></div>

And for the CSS:

DotCSSMask.css

.dot-mask {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  background-image: radial-gradient(#e5e7eb 1px, transparent 1px);
  background-size: 16px 16px;
  -webkit-mask-image: radial-gradient(
    ellipse 50% 50% at 50% 50%,
    #000 60%,
    transparent 100%
  );
  mask-image: radial-gradient(
    ellipse 50% 50% at 50% 50%,
    #000 60%,
    transparent 100%
  );
}

Mask can be very useful to hide part of an element and create interesting effects. The idea here is to use a radial gradient as a mask to hide the part of the background we don't want to see. You can play with the gradient to create different effects!

Conclusion

I hope you enjoyed this article and that you learned something new. I think it's a cool way to make a background without using an image. You can do a lot of cool stuff with this, like create a gradient on top of the grid or dot background.

Remember to check https://bg.ibelick.com if you want to copy/paste more cool CSS backgrounds in your project.

Published: 7/14/2023

Join my newsletter to stay updated about the latest things I've created and discover the great finds I've come across on the internet.