Memphis Pattern Backgrounds

Officialby Cube Burst Studios

Eight pure-CSS repeating patterns (stripes, dots, grid, zigzag, waves, checker, triangles, confetti). Recolour with two variables.

⬇ Download ZIP 1.7 KB

Category: Web Dev
File: memphis-patterns.zip
Size: 1.7 KB
Downloads: 0
Added: 16 Oct 2026
Licence: Free to use, no credit needed (CC0)

#css #patterns #backgrounds #memphis #retro

⚑ Report this

Eight pure-CSS repeating patterns (stripes, dots, grid, zigzag, waves, checker, triangles, confetti). Recolour with two variables.

The download has a working demo (index.html) plus the files to copy. The key file is shown below with a Copy button.

component.css

/* Memphis Pattern Backgrounds · Cube Burst Studios · CC0
   Pure-CSS repeating patterns. Add a class to any element; recolour with --fg (lines) and --bg.
   .mp-stripes .mp-dots .mp-grid .mp-zigzag .mp-waves .mp-checker .mp-triangles .mp-confetti */
[class*="mp-"] { --fg: #18142c; --bg: #fffdf8; --s: 24px; background-color: var(--bg); }
.mp-stripes { background-image: repeating-linear-gradient(45deg, var(--fg) 0 4px, transparent 4px calc(var(--s) / 2)); }
.mp-dots { background-image: radial-gradient(var(--fg) 18%, transparent 20%); background-size: var(--s) var(--s); }
.mp-grid { background-image: linear-gradient(var(--fg) 2px, transparent 2px), linear-gradient(90deg, var(--fg) 2px, transparent 2px); background-size: var(--s) var(--s); }
.mp-zigzag { background-image: linear-gradient(135deg, var(--fg) 25%, transparent 25%), linear-gradient(225deg, var(--fg) 25%, transparent 25%);
	background-size: var(--s) calc(var(--s) / 2); background-position: 0 0; }
.mp-waves { background-image: radial-gradient(circle at 50% 0, transparent 40%, var(--fg) 41% 52%, transparent 53%); background-size: var(--s) calc(var(--s) / 2); }
.mp-checker { background-image: conic-gradient(var(--fg) 25%, transparent 0 50%, var(--fg) 0 75%, transparent 0); background-size: var(--s) var(--s); }
.mp-triangles { background-image: linear-gradient(60deg, var(--fg) 25%, transparent 25.5%), linear-gradient(-60deg, var(--fg) 25%, transparent 25.5%); background-size: var(--s) calc(var(--s) * .866); }
.mp-confetti { background-image: radial-gradient(circle at 20% 30%, #ef4c7a 3px, transparent 4px), radial-gradient(circle at 70% 60%, #5fe3ce 3px, transparent 4px),
	linear-gradient(45deg, transparent 46%, #f7e065 46% 54%, transparent 54%); background-size: calc(var(--s) * 2) calc(var(--s) * 2), calc(var(--s) * 2) calc(var(--s) * 2), calc(var(--s) * 1.5) calc(var(--s) * 1.5); }