32 CSS Search Box & Search Bar Designs
Drop Shadow Float
Subtle elevation lift on focus — a soft transform + larger drop-shadow makes the input feel like it raised toward the user.
Drop Shadow Float the 21st 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-float-s" role="search">
<label class="csb-sr" for="csb-float-s-i">Search</label>
<svg viewBox="0 0 24 24" aria-hidden="true">
<circle cx="11" cy="11" r="7" />
<path d="m20 20-3.5-3.5" />
</svg>
<input id="csb-float-s-i" type="search" name="q" placeholder="Search..." />
</form> .csb-float-s {
display: inline-flex; align-items: center; gap: 10px;
padding: 11px 14px;
background: #1a1a28;
border: 1px solid rgba(255,255,255,0.08);
border-radius: 10px;
box-shadow: 0 1px 2px rgba(0,0,0,0.3);
transform: translateY(0);
transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s;
}
.csb-float-s:focus-within {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(124,108,255,0.25), 0 2px 4px rgba(0,0,0,0.3);
border-color: rgba(124,108,255,0.5);
}
.csb-float-s svg { width: 15px; height: 15px; fill: none; stroke: #7a7899; stroke-width: 2; stroke-linecap: round; }
.csb-float-s input {
width: 220px; padding: 0;
border: 0; outline: none; background: transparent;
color: #f0eeff; font: 500 14px/1 system-ui, sans-serif;
}
.csb-float-s input::placeholder { color: #b8b6d4; }
.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
Glitch SearchCompact MobileFocus Ring BloomInset PressedBorder TraceFloating CardAurora DriftVoice SearchLoading SpinnerExpanding InputInline SuggestionsTagged Filter
View the full collection →