Hard edges, hard shadows

The border carries the boundary, which is why this style passes the criterion neumorphism cannot.

Home › Professions › Design › Neubrutalism

Hard edges, hard shadows

A solid border and an unblurred offset shadow. The border is what carries the boundary, which is why this style passes the criterion neumorphism cannot.

Local tool — nothing you make here is uploaded
Nothing here leaves this browser. Colours, images, SVG and generated code are processed on your own device. No file is uploaded, nothing you enter is stored on a server, and none of it is passed to the analytics or advertising scripts on this page.
What a contrast check does and does not prove. Meeting a ratio satisfies one WCAG success criterion. It does not make an interface accessible, and it says nothing about focus order, labelling, motion, or whether the thing is usable at all. Automated checks find a minority of real barriers.
The hover, and why it works

Moving the element by half the shadow offset and halving the shadow makes it look pressed into the page. It is one transform and one shadow change, so it composites cheaply.

Because the boundary is a real border rather than a shadow, the control is identifiable at any zoom, in forced-colours mode, and for anyone who cannot resolve a soft edge. That is not incidental — it is the reason the style survives an audit.

Loud is not the same as inaccessible

Neubrutalism gets treated as the opposite of careful design, and on the specific question of whether a control is identifiable it does rather well: high-contrast borders, unambiguous edges, no reliance on subtle shading.

Where it does need care is colour. Large areas of fully saturated colour are tiring, and the style tends to encourage them.

Forced colours

In Windows high contrast mode the browser replaces your colours with the user's. A design carried by borders survives that; one carried by shadow disappears, because shadows are not replaced — they are removed.