Background Patterns
CSS-only patterns on each surface color. Click any to copy the class name.
base-100
bg-base-100
Dots
.pat-dots
Copied!
Grid
.pat-grid
Copied!
Diagonal
.pat-diagonal
Copied!
Cross
.pat-cross
Copied!
Horizontal
.pat-horizontal
Copied!
Zigzag
.pat-zigzag
Copied!
Diamond
.pat-diamond
Copied!
Noise
.pat-noise
Copied!
base-200
bg-base-200
Dots
.pat-dots
Copied!
Grid
.pat-grid
Copied!
Diagonal
.pat-diagonal
Copied!
Cross
.pat-cross
Copied!
Horizontal
.pat-horizontal
Copied!
Zigzag
.pat-zigzag
Copied!
Diamond
.pat-diamond
Copied!
Noise
.pat-noise
Copied!
primary
bg-primary
Dots
.pat-dots
Copied!
Grid
.pat-grid
Copied!
Diagonal
.pat-diagonal
Copied!
Cross
.pat-cross
Copied!
Horizontal
.pat-horizontal
Copied!
Zigzag
.pat-zigzag
Copied!
Diamond
.pat-diamond
Copied!
Noise
.pat-noise
Copied!
neutral
bg-neutral
Dots
.pat-dots
Copied!
Grid
.pat-grid
Copied!
Diagonal
.pat-diagonal
Copied!
Cross
.pat-cross
Copied!
Horizontal
.pat-horizontal
Copied!
Zigzag
.pat-zigzag
Copied!
Diamond
.pat-diamond
Copied!
Noise
.pat-noise
Copied!
Usage
<section class="bg-base-200 pat-dots py-20">
...content...
</section>