Memphis Pattern Background
An 80s Memphis print of squiggles, triangles, dot grids, half circles and crosses in four colors, drifting diagonally over cream. Four masks cut one tile, each filled with a hue from your accent.
Also known as: memphis design pattern css, 80s pattern background, retro shapes pattern.
HTML
<div class="bgx-memphis-pattern" aria-hidden="true"> <span class="bgx-memphis-pattern-tile"><i></i><i></i><i></i><i></i></span> </div>
CSS
.bgx-memphis-pattern {
--c: var(--bgx-color, #3b82f6);
font-size: var(--bgx-size, 16px);
position: absolute;
inset: 0;
overflow: hidden;
--tile: 12em;
background: color-mix(in srgb, var(--c) 5%, #fff8ec);
}
.bgx-memphis-pattern-tile {
position: absolute;
inset: calc(var(--tile) * -1) 0 0 calc(var(--tile) * -1);
animation: bgx-memphis-pattern-drift 18s linear infinite;
}
.bgx-memphis-pattern-tile > i {
position: absolute;
inset: 0;
-webkit-mask: var(--shapes) 0 0 / var(--tile) var(--tile);
mask: var(--shapes) 0 0 / var(--tile) var(--tile);
}
.bgx-memphis-pattern-tile > i:nth-child(1) {
background: var(--c);
--shapes: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M8 30q6-8 12 0t12 0 12 0M58 104q5-7 10 0t10 0 10 0'/%3E%3Ccircle cx='92' cy='88' r='7'/%3E%3C/g%3E%3C/svg%3E");
}
.bgx-memphis-pattern-tile > i:nth-child(2) {
background: oklch(from var(--c) 0.7 0.17 calc(h + 110));
--shapes: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' preserveAspectRatio='none'%3E%3Cpath d='M84 14l14 24H70Z' fill='none' stroke='%23000' stroke-width='3' stroke-linejoin='round'/%3E%3Cpath d='M18 84a12 12 0 0 1 24 0Z'/%3E%3C/svg%3E");
}
.bgx-memphis-pattern-tile > i:nth-child(3) {
background: oklch(from var(--c) 0.86 0.16 calc(h + 200));
--shapes: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' preserveAspectRatio='none'%3E%3Cg%3E%3Ccircle cx='50' cy='50' r='2'/%3E%3Ccircle cx='56' cy='50' r='2'/%3E%3Ccircle cx='62' cy='50' r='2'/%3E%3Ccircle cx='50' cy='56' r='2'/%3E%3Ccircle cx='56' cy='56' r='2'/%3E%3Ccircle cx='62' cy='56' r='2'/%3E%3Ccircle cx='50' cy='62' r='2'/%3E%3Ccircle cx='56' cy='62' r='2'/%3E%3Ccircle cx='62' cy='62' r='2'/%3E%3Ccircle cx='104' cy='58' r='6'/%3E%3C/g%3E%3Cpath d='M10 106l6-6 6 6 6-6 6 6' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.bgx-memphis-pattern-tile > i:nth-child(4) {
background: oklch(from var(--c) 0.28 0.06 h);
--shapes: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M40 18v12M34 24h12M110 100v10M105 105h10M70 76l8-8M76 80l8-8M82 84l8-8'/%3E%3Ccircle cx='28' cy='58' r='4'/%3E%3C/g%3E%3C/svg%3E");
}
@keyframes bgx-memphis-pattern-drift {
to { transform: translate(var(--tile), var(--tile)); }
}
@media (prefers-reduced-motion: reduce) {
.bgx-memphis-pattern, .bgx-memphis-pattern *, .bgx-memphis-pattern::before, .bgx-memphis-pattern::after, .bgx-memphis-pattern *::before, .bgx-memphis-pattern *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Customizing this snippet
- Color: set
--bgx-coloron the element or a parent. Currently previewing#3b82f6. - Pattern scale: set
--bgx-size. Every other dimension is inem, so the whole thing scales together. Currently previewing16px. - Speed: change the duration on the
transitionoranimationshorthand. Staggered delays are relative, so they keep their rhythm. - Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.