Techniques
Terrazzo Confetti Background
A scattered dot-and-shape pattern on the page background, evoking the terrazzo laminate finishes of original Memphis furniture.
.terrazzo-bg {
background-color: #faf6e8;
background-image:
radial-gradient(circle 3px, #ff3d8b 100%, transparent 100%),
radial-gradient(circle 2px, #00d4d6 100%, transparent 100%),
radial-gradient(circle 4px, #ffd72d 100%, transparent 100%),
radial-gradient(circle 2px, #2155cd 100%, transparent 100%),
radial-gradient(circle 3px, #5fdc5f 100%, transparent 100%);
background-size: 180px 160px, 220px 200px, 200px 180px, 240px 220px, 260px 240px;
background-position: 10px 20px, 80px 100px, 150px 50px, 40px 160px, 120px 130px;
}
Hard-Offset Shadow Card
Thick-bordered card with a solid, non-blurred shadow offset to the bottom-right — the signature Memphis "pop-up" depth effect.
.memphis-card {
background: #ffffff;
border: 3px solid #1e1b0f;
border-radius: 8px;
padding: 24px;
box-shadow: 6px 6px 0 #1e1b0f;
transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1),
box-shadow 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.memphis-card:hover {
transform: translate(3px, 3px);
box-shadow: 3px 3px 0 #1e1b0f;
}
Zigzag Divider
A CSS-only zigzag border separator inspired by the angular geometries found on Memphis textile patterns and the Tahiti lamp.
.zigzag-divider {
position: relative;
height: 20px;
background:
linear-gradient(135deg, #ff3d8b 25%, transparent 25%) -10px 0,
linear-gradient(225deg, #ff3d8b 25%, transparent 25%) -10px 0,
linear-gradient(315deg, #00d4d6 25%, transparent 25%),
linear-gradient(45deg, #00d4d6 25%, transparent 25%);
background-size: 20px 20px;
background-color: #faf6e8;
}