Glitch Search

RGB-split glitch shudders across the placeholder when focused — leans into a hacker / dev-tool aesthetic.

Pure CSS MIT licensed

Glitch Search the 25th 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

Open in playground

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>

.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 Indicator Drop Shadow Float Search + Filter Dual Tone Outline Compact Mobile Focus Ring Bloom Inset Pressed Border Trace Floating Card Aurora Drift Voice Search Loading Spinner

View the full collection →