32 CSS Search Box & Search Bar Designs
Brutalist Stamp
Hard offset shadow, zero radius, bold mono — a search bar that doesn't apologize for itself.
Brutalist Stamp the 17th of 32 designs in the 32 CSS Search Box & Search Bar Designs collection. The design is implemented in pure CSS — no JavaScript required. Copy the HTML and CSS panels below into your project. Because the demo is pure CSS, it works in any framework or templating engine you happen to use. The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<form class="csb-brut" role="search"> <label class="csb-sr" for="csb-brut-i">Search</label> <input id="csb-brut-i" type="search" name="q" placeholder="SEARCH..." /> <button type="submit">GO</button> </form>
.csb-brut {
display: inline-flex; align-items: stretch;
background: #f0eeff;
border: 2.5px solid #1a1a2e;
box-shadow: 5px 5px 0 #ff6c8a;
transition: transform 0.1s, box-shadow 0.1s;
}
.csb-brut:focus-within { transform: translate(-1px,-1px); box-shadow: 6px 6px 0 #ff6c8a; }
.csb-brut input {
width: 220px; padding: 11px 14px;
border: 0; outline: none; background: transparent;
color: #1a1a2e; font: 700 13px/1 'Courier New', monospace;
letter-spacing: 0.08em;
}
.csb-brut input::placeholder { color: rgba(26,26,46,0.5); }
.csb-brut button {
padding: 0 20px;
border: 0; border-left: 2.5px solid #1a1a2e;
cursor: pointer;
background: #1a1a2e; color: #fff;
font: 800 12px/1 'Courier New', monospace;
letter-spacing: 0.12em;
}
.csb-sr {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
More from 32 CSS Search Box & Search Bar Designs
Inset PressedBorder TraceFloating CardAurora DriftVoice SearchLoading SpinnerExpanding InputInline SuggestionsTagged FilterRecent SearchesInline Loading BarCombo with Scope
View the full collection →