Home / Bold and Raw / Risograph Poster
Risograph Poster CSS Template, Free with Live Demo
Free risograph style website template with grainy texture, overlapping ink colors and misaligned print layers in pure CSS. Live demo and HTML download. The example is Ink Fest, a zine fair.
What is risograph poster?
Risograph is a cheap printing method loved by zine makers and poster artists. Each color is printed as a separate layer, so inks overlap into new colors, layers sit slightly off and the paper shows a soft grain.
The web version uses mix-blend-mode: multiply so overlapping shapes mix like real ink. A second copy of the headline sits a few pixels off, and a noise texture from an inline SVG adds the grain.
Good for
- Zine fairs, markets and festivals
- Print shops and illustrators
- Music gig posters
- Bookshops and indie publishers
What you get in this template
- Overlapping circles that mix with multiply
- Headline printed twice slightly off register
- Paper grain from an inline SVG noise filter
- Riso pink, blue and yellow palette
- Table section cards with ink borders
The key CSS
This is the part that makes the risograph poster look work. Copy it into your own project.
.circ { border-radius: 50%; mix-blend-mode: multiply; }
h1 { color: #0078bf; mix-blend-mode: multiply; }
h1 span { position: absolute; left: 6px; top: 5px; color: #ff48b0; z-index: -1; }
body::after {
content: ""; position: fixed; inset: 0; pointer-events: none;
opacity: .35; mix-blend-mode: multiply;
background-image: url("data:image/svg+xml,...feTurbulence...");
}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
How do you make a risograph effect in CSS?
Use mix-blend-mode: multiply on colored shapes and text so they mix where they overlap, offset a second copy of the text by a few pixels, and add a grain texture on top.
How do I add a grain texture without an image file?
Use an inline SVG with an feTurbulence filter as a background image. It stays tiny and works in every modern browser.
What colors are typical for risograph?
Fluorescent pink, medium blue and yellow are the classic riso inks. When they overlap they make purple, green and red.
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
017. Memphis
Confetti Co., a party planner
018. Retro Pixel
Frog Knight, an indie game launch page