How to Create Grid and Dots Background Using Tailwind CSS

Background designs are crucial for enhancing the visual appeal of web applications. Among the most versatile and visually appealing patterns are grids and dots. Tailwind CSS, with its powerful utility classes, makes creating these patterns both simple and efficient. In this article, we will explore how to create grid and dots backgrounds using Tailwind CSS, providing step-by-step guidance and practical examples.

Creating a Grid Background

Grid backgrounds are created using linear gradients combined with the bg-[size] property in Tailwind CSS. Here’s how you can achieve this:

{/* Grid background */}

<div class="absolute -z-10 inset-0 h-full w-full 
bg-[linear-gradient(to_right,#73737320_1px,transparent_1px),linear-gradient(to_bottom,#73737320_1px,transparent_1px)] 
bg-[size:20px_20px]" />

bg-[linear-gradient(...)]: Defines two linear gradients, one for vertical lines and another for horizontal lines.
bg-[size:20px_20px]: Sets the grid cell size to 20px by 20px.
-z-10: Places the grid background behind the content.

then let's implement this in the components

 <div class="relative min-h-screen flex flex-col items-center justify-center">
      <div class="w-[70%] mx-auto text-center">
        <h1 class="text-[3rem] font-bold text-neutral-950">
          Lorem ipsum dolor sit amet.
        </h1>
        <p class="text-[1rem] text-neutral-800">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae,
          eligendi dolore? Atque labore odio soluta amet, rem aspernatur veniam
          molestias repellendus maiores harum magni! Eius aut nihil cum sunt
          sequi?
        </p>
      </div>
      {/* Grid background */}
      <div class="absolute -z-10 inset-0 h-full w-full bg-[linear-gradient(to_right,#73737320_1px,transparent_1px),linear-gradient(to_bottom,#73737320_1px,transparent_1px)] bg-[size:20px_20px]" />
    </div>

For the grid background to position correctly and stay behind other elements, the parent container must have a relativeclass. This ensures the background respects the boundaries of the parent component.

and it will look like this:

Creating Dots Background

With Tailwind CSS, you can achieve this effect using radial gradients. Here's how to implement a dots background:

{/* Dots background */}
<div class="absolute -z-10 inset-0 h-full w-full 
bg-[radial-gradient(circle,#73737350_1px,transparent_1px)] 
bg-[size:10px_10px]" />

bg-[radial-gradient(circle, #737373 10%, transparent 10%)]: Creates circular dots with 10% coverage in each cell of the grid.
bg-[size:10px_10px]: Specifies the spacing between dots, with 20px cells.
absolute -z-10: Positions the dots background behind other content.

Optional: Add Mask for Enhanced Effects

To elevate the visual appeal of your grid and dots background, you can apply a mask. Masks allow you to control the visibility of the background, creating fade effects.

Grid background with mask:

<div class="absolute -z-10 inset-0 h-full w-full 
bg-[linear-gradient(to_right,#73737320_1px,transparent_1px),linear-gradient(to_bottom,#73737320_1px,transparent_1px)] 
bg-[size:20px_20px] 
[mask-image:radial-gradient(ellipse_50%_50%_at_50%_50%,#000_80%,transparent_100%)]" />

Dots background with mask:

<div class="absolute -z-10 inset-0 h-full w-full 
bg-[radial-gradient(circle,#73737350_1px,transparent_1px)] 
bg-[size:10px_10px] 
[mask-image:radial-gradient(ellipse_50%_50%_at_50%_50%,#000_80%,transparent_100%)]" />

The result will be like this:

Conclusion

Creating grid and dots backgrounds with Tailwind CSS is a simple yet powerful way to enhance the visual appeal of your web applications. By combining utility classes like bg-[linear-gradient] and bg-[radial-gradient] with features such as bg-[size] and optional masks, you can achieve a wide range of customizable and dynamic designs.

We hope this article has provided clear guidance and inspiration for implementing these patterns in your projects. Whether you’re designing a full-page layout or adding subtle enhancements to individual components, these techniques can help you create engaging and visually appealing user interfaces. You’ll find this project in my github. See you, Thanks guys!