32 CSS Search Box & Search Bar Designs
Neon Outline
Synthwave neon ring with a soft glow that intensifies on focus — built for dark dashboards and game UIs.
Neon Outline the 4th 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-neon" role="search"> <label class="csb-sr" for="csb-neon-i">Search</label> <input id="csb-neon-i" type="search" name="q" placeholder="$ search_" /> </form>
.csb-neon {
position: relative; display: inline-block;
}
.csb-neon input {
width: 260px;
padding: 12px 16px;
background: #0a0014;
border: 1.5px solid #6cffff;
border-radius: 4px;
color: #6cffff;
font: 500 13px/1 'Courier New', monospace;
letter-spacing: 0.06em;
outline: none;
box-shadow: 0 0 8px rgba(108,255,255,0.25), inset 0 0 6px rgba(108,255,255,0.1);
transition: box-shadow 0.25s, border-color 0.25s;
}
.csb-neon input::placeholder { color: rgba(108,255,255,0.5); }
.csb-neon input:focus {
border-color: #ff6cff;
box-shadow: 0 0 18px rgba(255,108,255,0.6), 0 0 36px rgba(255,108,255,0.2), inset 0 0 10px rgba(255,108,255,0.15);
color: #ff6cff;
}
.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;
}