Brutalist website templates
4 of our 20 templates
Brutalist web design shows its structure instead of hiding it: hard grids, heavy or oversized type, flat blocks of colour, thick rules and very little decoration. It reads as confident and a little rough, which is why studios, shops and local businesses that want to stand out use it.
These templates take the look and add motion: blocks slide, type is set to fill the width, and sections change as you scroll. The colours and fonts are CSS variables at the top of the file, so you can push the look further or soften it.
The style works best when the content is short and direct: a price list, opening hours, a few services, one clear button. Keep the grid and the type size when you rewrite the copy, and change the colours as a set rather than one by one, so the blocks still read as one system.
Under each template: what makes it brutalist.
Every template here is free under the MIT license: one index.html with its CSS and scripts inside (GSAP, ScrollTrigger and Lenis load from jsDelivr), plus AGENTS.md, CREDITS.md (photos from Unsplash under the Unsplash License, fonts under the SIL Open Font License) and LICENSE, in its own GitHub repository at github.com/8bsite with a live demo on GitHub Pages. Each template's page has the download commands.
Flat, square blocks of loud colour, heavy grotesk headings and black gutters that leave the grid in plain view.
Two flat inks and nothing softened: full-width ultramarine and pink bands, a heavy grotesk sized to fill the width, halftone dots and registration marks left in view.
Raw and monochrome: near-black and off-white slabs on an exposed four-column grid, headings stepping across it like a staircase, a wordmark built from rounded dashes.
Full-screen slabs of flat colour, a black cover square, hairlines and fee blocks sized by price give it a blocky, unornamented look.
Questions
What is brutalist web design?
A style named after brutalist architecture: raw materials shown as they are. On the web that means visible grids, system-like or very heavy type, flat colour and almost no shadows or gradients.
Is a brutalist look a good idea for a business site?
It suits businesses that want to look direct and a little unusual: studios, shops, repair and print services, small practices. The structure stays clear because everything sits on a visible grid, so visitors still find prices and contact details quickly.
Can I soften a brutalist template?
Yes. Change the colour and font variables in the :root block at the top of the file, and the whole page follows. The layout and the motion stay the same.