dot grid pattern background decorative subtle Hero-Hintergrund mit subtiler Textur Section-Hintergrund statt flachem Weiß Decorative Overlays hinter UI-Elementen Leere weiße Sections wirken billig Dot-Pattern ohne Image-Asset oder JS Responsives Pattern das mit der Section skaliert
Dot Matrix
Fetch snippet JSON:
curl https://webspire.de/snippets/decorative/dot-matrix.json Preview
Background
Customize
Quick Start
<section class="dot-matrix py-20">...</section>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- A11y
- prefers-color-scheme
- Size
- 1172 bytes · 48 lines
- Custom Properties
-
--dot-color--dot-size--dot-spacing - Classes
-
.dot-matrix.dot-matrix-lg.dot-matrix-fade
dot grid pattern background decorative subtle
Nutzt radial-gradient als background-image mit background-size für das Raster — kein SVG-Asset nötig. .dot-matrix-fade blendet per mask-image radial aus, sodass der Mittelpunkt scharf und die Ränder weich sind. Farben Dark-Mode-kompatibel via prefers-color-scheme.