Skip to main content
DevTools24

CSS Background Pattern Generator

CSS-Hintergrundmuster wie Punkte, Raster, Streifen und Schachbretter mit reinem CSS generieren.

background-color: #1a1a2e;
background-image: radial-gradient(#3b82f6 1px, transparent 1px);
background-size: 20px 20px;

CSS-Hintergrundmuster - Technische Details

CSS-Hintergrundmuster verwenden Verläufe und background-size, um wiederholende Muster ohne Bilder zu erstellen. Radiale Verläufe erzeugen Punkte, lineare Verläufe erzeugen Streifen und Raster. Mehrere Hintergründe können für komplexe Effekte überlagert werden. Reine CSS-Muster sind leichtgewichtig und skalieren perfekt.

Kommandozeilen-Alternative

.dots {\n  background: radial-gradient(circle, #000 1px, transparent 1px);\n  background-size: 20px 20px;\n}

Referenz

Offizielle Spezifikation ansehen