Brutalist web design strips a page back to raw structure: default or system fonts, visible borders, plain links and little decoration. Neo-brutalism, its friendlier relative, keeps the thick black outlines but adds flat bright colours and hard offset shadows. Both are mostly CSS choices, so the examples below are editable and every rule can be copied.
| Trait | Brutalist | Neo-brutalist |
|---|---|---|
| Type | System or monospace, often default sizes | Bold grotesk or system sans, large |
| Colour | Black, white, maybe one link blue | Flat saturated fills: yellow, pink, mint |
| Borders | 1px rules, tables, visible boxes | 2 to 4px solid black outlines |
| Shadows | None | Hard offset, no blur |
| Feel | Raw, document-like | Playful, sticker-like |
Updated
Galleries of brutalist sites show screenshots you cannot inspect. Every example here is an original design written in plain HTML and CSS, rendered live, editable in place and free to copy, plus a builder for the neo-brutalist button that most people come looking for.
Adjust the border, shadow offset, fill and radius. Starting values produce this CSS:
.neo {
background: #facc15;
color: #000;
border: 3px solid #000;
border-radius: 0px;
box-shadow: 6px 6px 0 #000;
padding: 12px 20px;
font-weight: 700;
transition: transform .1s, box-shadow .1s;
}
.neo:hover {
transform: translate(3px, 3px);
box-shadow: 3px 3px 0 #000;
}System monospace, default blue links and a plain table. The whole look is a handful of rules.
<style>
body { font-family: ui-monospace, Menlo, Consolas, monospace; background: #fff; color: #000; }
h1 { font-size: 28px; border-bottom: 2px solid #000; margin: 0 0 8px; }
table { border-collapse: collapse; } td { border: 1px solid #000; padding: 4px 8px; }
</style>
<h1>MARA OKAFOR / TYPE + PRINT</h1>
<p>Index of work. <a href="#">Contact</a> <a href="#">CV</a></p>
<table><tr><td>2026</td><td><a href="#">Zine no. 4</a></td></tr><tr><td>2025</td><td><a href="#">Poster series</a></td></tr></table>Thick outline, flat fill and a hard shadow on both the card and the button.
<style>
.card { max-width: 240px; padding: 16px; background: #a7f3d0; border: 3px solid #000; box-shadow: 8px 8px 0 #000;
font-family: system-ui, sans-serif; }
.card h2 { margin: 0; font-size: 22px; } .price { font-size: 36px; font-weight: 900; margin: 8px 0; }
.card a { display: inline-block; padding: 10px 16px; background: #facc15; color: #000; font-weight: 800;
border: 3px solid #000; box-shadow: 4px 4px 0 #000; text-decoration: none; }
</style>
<div class="card"><h2>Studio plan</h2><p class="price">$12</p><a href="#">Start now</a></div>Borders double as the grid lines, so the structure is the decoration.
<style>
.grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 2px solid #000; border-left: 2px solid #000;
font: 700 14px system-ui, sans-serif; }
.grid div { border-right: 2px solid #000; border-bottom: 2px solid #000; padding: 20px 8px; }
.grid div:nth-child(2) { background: #f472b6; } .grid div:nth-child(6) { background: #60a5fa; }
</style>
<div class="grid"><div>01 Logo</div><div>02 Poster</div><div>03 Menu</div><div>04 Signage</div><div>05 Web</div><div>06 Book</div></div>A labelled field and button with heavy outlines and a thick focus ring that fits the style.
<style>
form { font-family: system-ui, sans-serif; } label { display: block; font-weight: 800; margin-bottom: 4px; }
input, button { font: inherit; padding: 10px; border: 3px solid #000; }
button { background: #000; color: #fff; font-weight: 800; }
input:focus, button:focus { outline: 4px solid #facc15; outline-offset: 2px; }
</style>
<form><label for="em">GET THE ISSUE</label><input id="em" type="email" placeholder="[email protected]"> <button>JOIN</button></form>Brutalism suits sites that want to signal personality or a do-it-yourself attitude: personal pages, studios, publications, music and event sites. Its plainness also makes pages light, because there is little imagery and few web fonts to download.
It is a harder fit where visitors need reassurance, such as healthcare, finance or checkout flows. There, a calmer layout with a single brutalist accent, like a bordered call to action, can be a better compromise.
Most brutalist pages share a vocabulary rather than a template, so you rarely need to borrow from anyone. Decide on one structural motif, such as a visible grid, numbered sections or a ticker, and repeat it consistently.
Choose a palette of black, white and at most two flat accents. Then let spacing, borders and type size do the remaining work instead of gradients, photos or soft shadows.
It is a style that shows the bones of a web page instead of polishing them: default fonts, hard edges, visible grids or tables, underlined links and few images. The aim is honesty and speed rather than prettiness.
Neo-brutalism borrows the heavy outlines and blunt layout of brutalism and pairs them with flat, bright colours, chunky type and solid offset shadows. It is common in product landing pages and app interfaces that want to look bold and informal.
Use box-shadow with an x and y offset, zero blur and a solid colour, for example box-shadow: 6px 6px 0 #000. Pair it with border: 3px solid #000. On hover, move the element toward the shadow and shrink the offset for a pressed feel.
Not by nature. Plain HTML, real links and strong outlines are often very accessible. Problems come from low-contrast colour pairs, tiny default text and removing focus styles, so check those as you would on any site.
Related: CSS button generator, CSS shadow generator, Web design principles, Colour contrast checker, CSS box model.
Start for free or see all free tools. We.Inc is free to start, with no card needed. AI building is on paid plans from $20 a month.
We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.