22 CSS Brutalism

They share a visual vocabulary and have opposite intentions. Brutalist web design, roughly 2014-2018, was a reaction against polished templated design — raw HTML defaults, system fonts, unstyled blue links, harsh contrast, deliberately uncomfortable. The reference was Brutalist architecture: exposed concrete, structure left visible. Neubrutalism, from about 2021, borrowed the surface — thick black borders, hard offset shadows, flat colour blocks — and dropped the ideology. It added bright pastels, rounded corners, playful illustration and careful spacing. Gumroad's 2022 redesign is the canonical example. So brutalism is anti-design; neubrutalism only looks anti-design while being fully designed and deliberately friendly. In practice searchers use the terms interchangeably, which is why this collection covers both on one page: positions 01-14 are the neubrutalist half, 15-22 the harsher original. If you are choosing between them, ask whether you want the page to feel welcoming or confrontational — that is the real decision, not the border width.

One declaration, and the detail everyone gets wrong is the blur: box-shadow: 4px 4px 0 #000. The fourth value must be zero. A blurred shadow reads as neumorphism or plain material depth — the opposite aesthetic — and it is the single fastest way to make a brutalist design look like a mistake. Offsets are typically 4-8px on cards and 2-4px on small controls, always positive on both axes so the light reads as coming from the top left. The border matters as much: 2-4px solid black, never a lighter grey, or the shadow floats free of its shape. For the press interaction, move the element toward its own shadow and halve the offset simultaneously: :active { translate: 2px 2px; box-shadow: 2px 2px 0 #000 }. That reads as the element physically depressing. Keep the transition short — 120-200ms — because slow easing on this aesthetic feels wrong; it wants to be snappy.

Bright, saturated pastels against black borders and an off-white page. The recurring palette is lilac (#c4b5fd), mint (#86efac), coral (#fda4af), butter (#fde68a) and sky (#93c5fd), with near-black #0a0a0a for borders, text and shadows. The page background is usually a warm off-white rather than pure white, which stops the pastels looking clinical. Two rules keep it from collapsing. First, use one pastel per block — the effect comes from adjacent blocks in different colours, not from gradients or blends within a block. Second, text is almost always black regardless of the fill, because black on a light pastel passes contrast easily while a coloured text on a coloured fill rarely does. The brutalist half inverts this entirely: black, white, and at most one accent, with the page itself often left at browser default. Check every combination against WCAG AA rather than trusting that a pastel is light enough.

It can be excellent or terrible, and the difference is deliberate. The aesthetic gives you two advantages for free: very high contrast, since black-on-pastel and black-on-white both clear 4.5:1 comfortably, and large obvious hit targets, because chunky is the point. Focus states are also easier than usual — a thick black or inverted outline fits the look rather than fighting it, so there is no excuse for removing the ring. The risks are specific. Historical brutalism sometimes used unreadable type sizes or hostile colour as a statement, which is a straightforward WCAG failure. Rotated elements — the sticker cards here sit at 1-2 degrees — must stay subtle, since heavy rotation harms readability for dyslexic users. And every demo in this collection guards prefers-reduced-motion, because the press-and-shift interaction is motion even though it is small. Every design here uses semantic HTML, real buttons, 44px minimum targets and visible focus rings.

A small rotation plus the offset shadow, and the restraint is what makes it work. Apply rotate: -2deg to the card and let its shadow rotate with it — the shadow must be part of the same element, not a separate layer, or the illusion breaks. Alternate the direction between siblings (-2deg, 1.5deg, -1deg) so the grid reads as hand-placed rather than systematically skewed. Keep every angle under about 3 degrees; past that the text becomes genuinely harder to read and the effect tips from playful into chaotic. For a badge pinned to a card corner, position it absolutely with a larger rotation — 6-12 degrees is fine on a two-word label — and give it its own border and shadow so it reads as a separate sticker rather than a corner ribbon. On hover, straightening the card to rotate: 0 while deepening the shadow gives a satisfying lift. Remember rotation does not affect layout, so a rotated card can overlap its neighbour: leave gap room.

Neubrutalism became mainstream through indie SaaS and creator tools. Gumroad's 2022 redesign is the reference point almost everyone cites — thick borders, flat pastels, hard shadows, and a deliberate rejection of the soft gradient look that dominated SaaS before it. Figma's marketing pages, Neobrutalism.dev, Bear Blog and Poolside FM all sit in the same family, and the style spread quickly through Product Hunt launches and design-tool landing pages because it photographs well and signals independence. The harsher original brutalism has a different lineage: brutalistwebsites.com catalogued it, Craigslist embodies it accidentally, and Bloomberg Businessweek ran an editorial version around 2016. The practical read is that neubrutalism suits products wanting to feel human, small and confident — creator tools, indie SaaS, developer products. True brutalism suits work that wants to feel uncompromising or anti-commercial: portfolios, editorial, art direction. Neither suits enterprise software, where the visual noise reads as unserious.

Yes, but the shadow needs rethinking rather than inverting. The naive approach — swap the page to dark and keep box-shadow: 4px 4px 0 #000 — makes the shadow disappear entirely, since black on near-black is invisible, and the whole aesthetic collapses because the shadow is the aesthetic. Two approaches work. Either keep the pastel blocks and switch the shadow to a light tone (a warm off-white or a brighter version of the block colour), which preserves the offset relationship while staying visible; or invert fully to a dark block with a coloured border and a coloured shadow, which reads as a neon-adjacent variant. Every demo here uses the first approach, driven by CSS custom properties on the root so the swap is a handful of token changes rather than a rewrite. Both @media (prefers-color-scheme: dark) and a [data-theme="dark"] override are supported, and each demo carries its own toggle so you can see both states.

The CSS ports unchanged — every .brt-NN selector and custom property is framework-agnostic, and 16 of the 22 designs need no JavaScript at all. In component terms, the offset shadow and press interaction are worth extracting once rather than repeating: a single .brutal utility class carrying border, shadow and the :active transform can then be composed onto buttons, cards and inputs. For Tailwind, the shadow needs an arbitrary value because the default scale is all blurred — shadow-[4px_4px_0_#000] — or better, add it to your @theme block as a named token so it stays consistent. Borders map to border-[3px] border-black, and the pastels belong in your theme rather than as arbitrary hex values scattered through the markup. The six JavaScript demos are small init functions: useEffect with a returned cleanup in React, onMounted plus onBeforeUnmount in Vue, onMount returning cleanup in Svelte. The modal uses native <dialog>, so no library is needed for focus trapping.