Neo brutalism web design: thick outlines, flat colour and hard shadows
Neo-brutalism, or neubrutalism, takes the raw honesty of brutalist websites and makes it cheerful: thick black outlines, flat saturated fills, chunky type and shadows offset with no blur at all. It's one of the few styles with a precise recipe, which is why it's easy to copy and easy to overdo.
How it differs from brutalism
Raw brutalism shows a page's structure by leaving it undecorated: system fonts, default links, visible borders. Neo-brutalism keeps the visible structure but designs it carefully. The outlines are deliberate and consistent, colour is bold and flat, and the hard shadow gives every block a printed, sticker-like weight. It became a familiar look in software marketing and interface design showcases, often for products that want to seem friendly and a bit irreverent. The older idea is covered in brutalist web design.
The recipe
- Outlines
- A 2px to 4px solid black border on cards, buttons, inputs and images. One thickness across the whole page.
- Hard offset shadows
- A shadow shifted down and right with no blur, in black or a flat colour:
box-shadow: 6px 6px 0 #000. It reads as a second layer cut out of paper. - Flat, saturated fills
- Two to four bright colours (yellow, pink, mint, lilac, cobalt) used as solid backgrounds for blocks. No gradients.
- Chunky type
- A heavy grotesque or geometric sans, often bold for body labels as well as headlines. One family is enough.
- Small or no radius
- Square corners are most common; a small, consistent radius (4px to 8px) also works. Mixing radii breaks the look.
- Pressed states
- On hover or press, the element moves towards its shadow (for example, translate 2px 2px while the shadow shrinks), as if being pushed into the page.
A hard shadow is not a glow
It's worth being precise here, because neo-brutalism and generic AI-generated pages both use coloured shadows, and they mean opposite things. A hard offset shadow has an offset and zero blur: it has an edge, it implies a light source, and it makes the element feel solid. A soft coloured glow has little or no offset and a large blur, often 40px or more, in the brand's purple or blue: it has no edge, it implies nothing physical, and it's one of the most recognisable habits of template and generated sites. The first is a design decision; the second is usually a default.
| Hard offset shadow | Soft coloured glow | |
|---|---|---|
| Typical CSS | 6px 6px 0 #000 | 0 10px 40px rgba(124, 58, 237, .45) |
| Blur | None | Large |
| Edge | Sharp | None |
| Reads as | A solid layer, printed or cut | Light leaking from the element |
| Pairs with | Outlines, flat fills | Gradients, translucent panels |
Where it works and where it tires
Neo brutalism web design suits products that want to feel approachable and a little playful without being childish: creator tools, indie software, newsletters, design resources, event sites and portfolios. It tires quickly on long pages, because every block is outlined, shadowed and coloured, so nothing stands out. It's also a hard sell for services that rely on calm trust, such as healthcare, finance or legal work.
The fix for fatigue is hierarchy. Give the strongest fill and the largest shadow to the primary action and one or two key blocks. Let the rest sit on the plain ground with an outline only. Not every card needs a colour.
Accessibility checks for neubrutalism UI
- Text on bright fills. Black text on yellow, mint or pink usually passes 4.5:1 comfortably; white text on those colours usually doesn't. Check each pairing.
- Buttons versus cards. When everything has an outline and a shadow, clickable and static blocks look alike. Make actions distinct with fill colour and a clear label.
- Focus visibility. A thick outline is already on every element, so the focus style needs to be different: a second offset ring or a colour change, not a slightly thicker border.
- Motion. The pressed-in movement is small and quick, which is fine, but disable it for visitors who ask for reduced motion.
Getting there with Anticode
No Anticode design system is called neo-brutalist, but the Brutalist system (Archivo, black rules on concrete) gets a good part of the way. Its cards, images and buttons use 2px black outlines and hard offset shadows with no blur, corners are square, and buttons move into their shadow on hover. What it doesn't do by default is the flat, multi-colour fills: the ground is a concrete grey and there's one action colour.
To push it further, change the :root colour tokens in the code editor (Pro mode), for example a brighter surface colour behind the cards. Fills for individual blocks would be other CSS changes, and the code editor doesn't keep those, so a true multi-colour page means editing an exported copy. The Critic's coloured-glow check won't flag a hard offset shadow: it looks for large, blurred shadows in colours other than black, so a 6px 6px 0 shadow in pink passes while a 40px purple haze doesn't.
Questions people ask
How do I make a neo brutalist shadow in CSS?
Use a box-shadow with an offset and no blur, such as box-shadow: 4px 4px 0 #000, together with a solid border of 2px or more. Keep the same offset on every element.
What colours work for neo brutalism?
Black for outlines and text, an off-white or light ground, and two to four flat, saturated fills. Check text contrast on each fill rather than assuming the palette works.
Is neo brutalism just a trend?
It's a recognisable look tied to a period, so it will date. Its useful parts, clear edges, strong contrast and visible pressed states, will outlast the fashion.