8 CSS Neobrutalism Examples

This Tectonic Stacked Tooltip creates a sophisticated, industrial-grade micro-interaction. Instead of a simple fade-in, the tooltip constructs itself from multiple sliding “plates” (slabs) that expand outward upon hovering. With its dark aesthetic, noise textures, and precise easing, it fits perfectly into sci-fi games, technical dashboards, or brutalist web designs. (Requires: Google Fonts (JetBrains Mono))

This Hand-Drawn Retro Radio Group injects personality into standard forms with a nostalgic, sketchbook aesthetic. It combines a “neo-brutalist” shadow style with subtle animations - like text jitter and a bouncing selection dot - to mimic the imperfection of hand-drawn art. The background features a CSS-generated paper texture and scanline effect, making it ideal for indie game interfaces, creative blogs, or retro-themed landing pages.

A bold, responsive input field that pops out upon activation; valid email entry triggers a bright green arrow button sliding in, which playfully animates on hover.

A minimalist dashboard visualizing the passage of time across multiple scales (minute to year) via animated progress bars, updated in real-time.

A bold, flat neo-brutalist profile card styled with monospace typography. The UI leverages high-contrast yellow and pink accents, thick black borders (border: 4px solid #000), and flat offset shadows (box-shadow: 8px 8px 0 #000). Features an avatar overlapping the header via translateY(50%) and a dashed-border info box.

A customized Bootstrap 5 accordion that visually elevates the active panel using the modern :has() pseudo-class. By detecting the .accordion-button:not(.collapsed) state, it applies a bold border and hard shadow to the parent container, creating a distinct “pop-out” focus effect.

This JS-free form component achieves a distinct “neo-brutalist” aesthetic by pairing a solid border with a hard, offset box-shadow, creating a tactile, pseudo-3D effect. This visual system is applied to a modern Flexbox layout and is enhanced by polished micro-interactions, including a unique box-shadow outline on :hover and a clear background change on :focus for a cohesive user experience.