6 Pure CSS1 with JSPublished 2026-10-05Free · no sign-up
Seven neo-brutalist components: a button with a hard offset shadow, a heavily framed product card, a loud sign-up form, navigation made of touching boxes, an oversized headline, a warning with a hazard stripe and a grid layout with its lines on show.
Thick black border, a flat saturated fill, uppercase type and a hard offset shadow that the button drops into when pressed. Brutalism is loud on purpose, but the contrast it brings is also why it is one of the most readable styles.
A product card with a heavy frame, a tag rotated across the corner, monospace price and no rounded corners anywhere. Every element is separated by black rules, so the structure is visible rather than implied.
View code
<article class="br2"><span class="tag">NEW</span><div class="im" aria-hidden="true"></div><h3>Canvas tote</h3><p class="pr">$32.00</p><button>Add to bag</button></article>
Big black labels, thick bordered fields, a raw grid and a solid shadowed submit button. The focus state is a heavy coloured outline, in keeping with the style and very easy to see.
View code
<form class="br3"><h3>JOIN THE LIST</h3><label>NAME<input autocomplete="name"></label><label>EMAIL<input type="email" autocomplete="email"></label><button>SUBSCRIBE →</button></form>
A navigation bar as a row of bordered boxes that touch, with the current page filled solid and hover inverting colours. No spacing tricks or icons, just boxes and words.
An oversized, tightly set headline with a highlighted word and a monospace footnote, the typographic heart of brutalist pages. The highlight is a mark element, so the emphasis has meaning as well as colour.
View code
<section class="br5"><h3>WE MAKE <mark>LOUD</mark> WEBSITES.</h3><p>// EST. 2019 — BERLIN</p></section>
A warning box with a striped hazard edge, a bold label and a square close button. The stripes are a repeating linear gradient in a pseudo-element on the left, and the label WARNING carries the meaning in words.
var a = document.querySelector('.br6'); a.querySelector('button').onclick = function () { a.remove(); };
07. Raw Grid Layout
BrutalismLayout
A layout grid with its lines showing: cells separated by thick black lines, numbered labels and mismatched cell sizes. Exposed structure is a signature of brutalist web design, built here with grid and a 3px gap over a black background.
Brutalism uses thick black borders, flat saturated fills and shadows with no blur, offset a few pixels. Pressing a button moves it into its shadow, which feels physical.
Structure on show
Instead of hiding layout, brutalist designs expose it: visible grid lines, numbered sections and boxes that touch. A grid with a black background and a small gap draws all the lines at once.
Loud, but readable
Black text on bright fills gives very high contrast, so the style is often more accessible than softer trends. Keep focus outlines just as bold as everything else.
Restraint in the details
Pick two or three fill colours and one typeface. Without a limit, brutalism turns into noise rather than attitude.
Frequently asked questions
Is brutalism good for business sites?
It suits creative studios, events and products that want to stand out; it is less suited to banks or healthcare.
Does it work on phones?
Yes. The boxes and borders scale well; reduce shadow offsets slightly on small screens.
Which fonts suit brutalism?
Heavy grotesques and monospace fonts for small labels.