See this style applied to a real page — identical content, different stylesheet.
Open live preview →About This Style
Neo-brutalism keeps the load-bearing parts of brutalism — heavy outlines, flat fills, hard offset shadows — and swaps the concrete grey for candy. The result is loud but friendly, which is why it colonised startup landing pages while the original brutalism stayed in art schools.
The rule that makes or breaks it: every shadow is a hard offset with zero blur, and every border is identical in weight. Soften either one and the whole thing reads as a sloppy card grid instead of a deliberate style.
Main Features:
- Uniform heavy border: 2–3px solid black on every element that has an edge. Mixed border weights destroy the effect immediately.
- Hard offset shadow: 6–8px on both axes, zero blur, zero spread, always the same direction and colour.
- Saturated pastel fills: Lilac, mint, butter, coral. Fully saturated but light in value, so black text stays readable.
- Press interaction: On hover the element translates by the shadow offset while the shadow shrinks — it looks physically pushed down.
- No gradients, no blur: Any softness contradicts the premise. Flat colour only.
Example AI Prompt
Design a neo-brutalist interface.
Edges:
- Every card, button and input uses a 3px solid #000 border. The same weight everywhere, no exceptions.
- Border radius 0. Nothing rounded.
Shadow:
- Cards and buttons use box-shadow: 8px 8px 0 #000 — hard offset, no blur, no spread.
- On hover, translate the element by (4px, 4px) and reduce the shadow to 4px 4px 0 #000 so it appears pressed into the page. Use a 0.1s linear transition, not an ease.
Colour:
- Background white. One saturated pastel per block (#c9b8ff lilac, #a8f0c6 mint, #ffe08a butter, #ffb3a7 coral).
- All text black. Accent colour only as a fill, never as text on a dark surface.
Type:
- A heavy grotesque for headings, uppercase, tight tracking. Body in the same family at regular weight.
Constraints:
- No gradients, no blur, no opacity tricks. Flat fills only.
- Keep the shadow direction identical across the whole page — one light source, or it looks like a mistake.Theme CSS Snippets
Neo-brutalist theme. --card-border-radius is 0 and the shadow is a hard offset — those two variables do most of the style work across the whole site.
body.theme-neo-brutalism {
--page-bg: #fdfdf7;
--page-bg-gradient: none;
--text-color: #111111;
--heading-color: #000000;
--link-color: #4b2fd6;
--border-color: #000000;
--card-bg: #ffffff;
--card-shadow: 8px 8px 0 #000000;
--card-hover-shadow: 4px 4px 0 #000000;
--header-bg: #c9b8ff;
--header-text-color: #000000;
--prompt-bg: #ffe08a;
--prompt-text-color: #000000;
--button-bg: #000000;
--button-text-color: #ffffff;
--button-hover-bg: #4b2fd6;
--card-border-radius: 0;
--base-font: var(--font-inter);
--heading-font: var(--font-montserrat);
}Where it fits
Use it when
- Consumer products and indie tools that want to feel human and a bit cheeky.
- Launch pages where the page itself is part of the marketing.
- Portfolios and event sites where standing out matters more than looking restrained.
Avoid it when
- Fintech, health or anything where trust is the primary currency — hard edges read as shouting.
- Dense data UI. The borders consume space that tables need.
- Long reading sessions; the high contrast and flat fills fatigue the eye quickly.
Resource Download
A working single-page demo in this style — the HTML and one self-contained stylesheet, no build step.
Download neo-brutalism.zip