Home / Bold and Raw / Memphis
Memphis CSS Template, Free with Live Demo
Free Memphis design website template with squiggles, dots, zigzags and bold 80s shapes drawn in CSS. Built for a party planner. Live demo and download. The example is Confetti Co., a party planner.
What is memphis?
Memphis design comes from a group of Italian designers in the 1980s. It is full of bright circles, triangles, squiggly lines, dot patterns and zigzags, all mixed together with a sense of humor.
Every shape here is CSS. The dots are a repeating radial gradient, the zigzag is two small linear gradients, the triangle is a border trick, and the squiggle is a tiny inline SVG.
Good for
- Party and event planners
- Kids brands and toy shops
- Creative agencies
- Food trucks and cafes
What you get in this template
- Circle, triangle, pill and dot shapes
- Zigzag border made with two gradients
- Squiggle line as inline SVG
- Package cards with colored offset shadows
- Shapes hide on phones so text stays clear
The key CSS
This is the part that makes the memphis look work. Copy it into your own project.
.dots {
background-image: radial-gradient(#1d1d1b 2px, transparent 2.5px);
background-size: 18px 18px;
}
.zig {
height: 22px;
background:
linear-gradient(135deg, #ff5a5f 25%, transparent 25%) -11px 0 / 22px 22px,
linear-gradient(225deg, #ff5a5f 25%, transparent 25%) -11px 0 / 22px 22px;
}How to use it
- Click Download HTML file above.
- Open the file in any code editor, like VS Code.
- Change the text, colors and links to match your project. Colors are at the top of the style tag.
- Upload it to any host, such as GitHub Pages, Netlify or your own server. It is one file with no build step.
Questions people ask
What is Memphis design?
It is a playful 1980s design style known for bright colors, simple geometric shapes, squiggles and patterns placed in a loose, fun way.
How do you make a dot pattern in CSS?
Use background-image: radial-gradient(color 2px, transparent 2.5px) with a background-size like 18px 18px. The dots repeat on their own.
How do I make a zigzag line?
Layer two linear gradients at 135 and 225 degrees with the same size, as in the code above. No image is needed.
More Bold and Raw designs
011. Neo Brutalism
Stackd, an invoicing tool for freelancers
012. Raw Brutalist
KXLR, a community radio station
013. Swiss Grid
Grid Days, a design conference in Zurich
014. Bold Type Hero
Pace, a running club
015. Anti Design
Static Bloom, an indie record label
016. Y2K Revival
Starlite, a mixtape playlist site
018. Retro Pixel
Frog Knight, an indie game launch page
019. Newspaper Editorial
The Harbor Gazette, a local news site