grid pattern dots background lines subtle grid background for landing pages dot pattern behind content sections technical/engineering aesthetic backgrounds are too plain need grid pattern without SVG or image files want configurable background pattern density
Grid Pattern
Fetch snippet JSON:
curl https://webspire.de/snippets/decorative/grid-pattern.json
Line grid
Dot grid
Background
Customize
Quick Start
<div class="grid-pattern h-64 w-full"></div>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- Size
- 729 bytes · 28 lines
- Custom Properties
-
--grid-size--grid-color--grid-thickness--grid-dot-size - Classes
-
.grid-pattern.grid-pattern-dots
grid pattern dots background lines
Pure CSS grid and dot patterns for backgrounds using repeating-linear-gradient and radial-gradient. Two variants: .grid-pattern (lines) and .grid-pattern-dots (dots).
Grid behind hero content
<section class="relative">
<div class="grid-pattern absolute inset-0 -z-10"></div>
<div class="mx-auto max-w-4xl py-24 text-center">
<h1 class="text-5xl font-bold text-white">Your Content</h1>
</div>
</section>Dot pattern with fade
<div class="grid-pattern-dots"
style="mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%)">
<!-- Content -->
</div>