32 CSS Search Box & Search Bar Designs 25 / 32
Glitch Search
RGB-split glitch shudders across the placeholder when focused — leans into a hacker / dev-tool aesthetic.
The code
<form class="csb-glitch" role="search"> <label class="csb-sr" for="csb-glitch-i">Search</label> <input id="csb-glitch-i" type="search" name="q" placeholder="$ search //" /> </form>
<form class="csb-glitch" role="search">
<label class="csb-sr" for="csb-glitch-i">Search</label>
<input id="csb-glitch-i" type="search" name="q" placeholder="$ search //" />
</form>.csb-glitch {
position: relative; display: inline-block;
}
.csb-glitch input {
width: 240px; padding: 11px 14px;
background: #0c0c12;
border: 1px solid rgba(46,204,138,0.4);
border-radius: 4px;
color: #2ecc8a; font: 500 13px/1 'Courier New', monospace;
letter-spacing: 0.06em;
outline: none;
transition: border-color 0.2s;
}
.csb-glitch input::placeholder { color: rgba(46,204,138,0.6); }
.csb-glitch input:focus {
border-color: #ff6c8a;
animation: csb-glitch-shake 0.4s steps(2);
}
@keyframes csb-glitch-shake {
0%,100% { transform: translateX(0); }
20% { transform: translateX(-2px); text-shadow: 2px 0 #ff6c8a, -2px 0 #06b6d4; }
40% { transform: translateX(2px); text-shadow: -2px 0 #ff6c8a, 2px 0 #06b6d4; }
60% { transform: translateX(-1px); text-shadow: 1px 0 #ff6c8a, -1px 0 #06b6d4; }
80% { transform: translateX(1px); text-shadow: 0 0 transparent; }
}
.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;
}
@media (prefers-reduced-motion: reduce) {
.csb-glitch,
.csb-glitch * {
animation: none !important;
}
}
.csb-glitch {
position: relative; display: inline-block;
}
.csb-glitch input {
width: 240px; padding: 11px 14px;
background: #0c0c12;
border: 1px solid rgba(46,204,138,0.4);
border-radius: 4px;
color: #2ecc8a; font: 500 13px/1 'Courier New', monospace;
letter-spacing: 0.06em;
outline: none;
transition: border-color 0.2s;
}
.csb-glitch input::placeholder { color: rgba(46,204,138,0.6); }
.csb-glitch input:focus {
border-color: #ff6c8a;
animation: csb-glitch-shake 0.4s steps(2);
}
@keyframes csb-glitch-shake {
0%,100% { transform: translateX(0); }
20% { transform: translateX(-2px); text-shadow: 2px 0 #ff6c8a, -2px 0 #06b6d4; }
40% { transform: translateX(2px); text-shadow: -2px 0 #ff6c8a, 2px 0 #06b6d4; }
60% { transform: translateX(-1px); text-shadow: 1px 0 #ff6c8a, -1px 0 #06b6d4; }
80% { transform: translateX(1px); text-shadow: 0 0 transparent; }
}
.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;
}
@media (prefers-reduced-motion: reduce) {
.csb-glitch,
.csb-glitch * {
animation: none !important;
}
}
More from 32 CSS Search Box & Search Bar Designs
Side IndicatorDrop Shadow FloatSearch + FilterDual Tone OutlineCompact MobileFocus Ring BloomInset PressedBorder TraceFloating CardAurora DriftVoice SearchLoading Spinner
View the full collection →