Dotted Background

Learn how to create a dotted background using TailwindCSS utilities and CSS gradients. Perfect for adding subtle texture to your designs!

Dotted backgrounds can add a subtle texture to your designs, making them more visually interesting. You can create a dotted background using TailwindCSS utilities and CSS gradients.

Basic Usage

Create a dotted background using a radial gradient and custom background size:

<div class="absolute inset-0 bg-[radial-gradient(var(--color-gray-200)_1px,transparent_1px)] [background-size:12px_12px]"></div>

Explanation

bg-[radial-gradient(...)]: This utility applies a radial gradient as the background.
var(--color-gray-200)_1px: Defines the color and size of the dots. The 1px specifies the size of each dot.
transparent_1px: Creates a transparent space around each dot, making the dots appear separated.
[background-size:12px_12px]: Sets the size of the background pattern, creating a grid of dots spaced 12px apart.

Variations

Different Dot Sizes and Spacing

You can adjust the size and spacing of the dots by changing the gradient and background size values:

<!-- Larger dots with more spacing -->
<div class="absolute inset-0 bg-[radial-gradient(var(--color-gray-200)_2px,transparent_2px)] [background-size:16px_16px]"></div>

<!-- Even larger dots with even more spacing -->
<div class="absolute inset-0 bg-[radial-gradient(var(--color-gray-200)_3px,transparent_3px)] [background-size:20px_20px]"></div>

Dark Mode Support

Adjust the dot color for dark mode using CSS variables and the dark: variant:

<div class="relative flex-col gap-3">
    <div class="absolute inset-0 my-auto bg-[radial-gradient(var(--dot-color)_1px,transparent_1px)] [background-size:12px_12px] [--dot-color:var(--color-gray-200)] dark:[--dot-color:var(--color-gray-800)]"></div>
</div>

Explanation

CSS Variables: The --dot-color variable is used to define the dot color.
Light Mode: In light mode, --dot-color is set to var(--color-gray-200).
Dark Mode: In dark mode, --dot-color is set to var(--color-gray-800) using the dark: variant.

By using CSS variables, you can easily switch between light and dark mode without having to recreate the entire gradient. This approach ensures consistency and reduces redundancy in your styles.

Conclusion

Creating a dotted background using TailwindCSS utilities and CSS gradients is a great way to add subtle texture to your designs. By leveraging custom properties and TailwindCSS’s utility classes, you can easily create dynamic and responsive dotted backgrounds for your projects.

On this page