Playground · 32 demos
CSS Search Boxes Playground
Pick any demo to open it in a live, side-by-side editor. Tweak the HTML, CSS or JS and see your changes render instantly. Reset any time to return to the original.
Or browse the full CSS Search Boxes collection for the gallery view with code panels.
01 Pure CSS
Minimal Underline
Borderless input with a thin bottom rule that animates outward from the centre on focus — the cleanest pattern that still signals interactivity.
Open
02 Pure CSS
Pill with Submit
Rounded pill shell with an inline submit button — the de facto pattern for site search and product search.
Open
03 Pure CSS
Glass Search
Frosted-glass shell with backdrop blur — sits beautifully over hero images and gradient backgrounds.
Open
04 Pure CSS
Neon Outline
Synthwave neon ring with a soft glow that intensifies on focus — built for dark dashboards and game UIs.
Open
05 Pure CSS
Floating Label
Material-style floating label that snaps up when the input is focused or filled — uses :placeholder-shown for a JS-free implementation.
Open
06 Pure CSS
Caret Highlight
On focus, a single accent line sweeps left-to-right across the bottom of the input — a one-shot reveal that signals "this field is active" without any perpetual motion.
Open
07 CSS + JS
Voice Search
Microphone button that pulses while "listening" — toggles a recording state that demonstrates the visual feedback pattern (not real audio).
Open
08 CSS + JS
Loading Spinner
Magnifying glass icon morphs into a spinner while the form is "searching" — paired with a class that simulates the loading state.
Open
09 Pure CSS
Clear-on-Type
An × clear button appears as soon as the user types — pure CSS via :placeholder-shown, no JS state needed.
Open
10 CSS + JS
Expanding Input
Compact icon-only at rest; click expands it into a full-width input. Collapses back when blurred and empty.
Open
11 CSS + JS
Inline Suggestions
Real autocomplete dropdown — keyboard-navigable (↑ ↓ Enter Esc) with five live results that filter as you type.
Open
12 Pure CSS
Keyboard Hint
A subtle ⌘K kbd badge sits inside the input as a hint to power users — fades when the field is focused.
Open
13 CSS + JS
Tagged Filter
Active filter chips live inside the search bar — click × on a chip to remove it. Real interaction, not a mock.
Open
14 CSS + JS
Recent Searches
Dropdown of recent queries on focus, with a "Clear all" action — production-grade pattern for site search and command palettes.
Open
15 Pure CSS
Animated Placeholder
Placeholder text cycles through example queries on a typewriter loop — pure CSS using steps() animation on a marquee track.
Open
16 Pure CSS
Avatar Search
Search bar with the logged-in user avatar at the right edge — common in dashboards. Subtle but communicates "this search is yours".
Open
17 Pure CSS
Brutalist Stamp
Hard offset shadow, zero radius, bold mono — a search bar that doesn't apologize for itself.
Open
18 Pure CSS
Compact Toolbar
Search slotted between filter chips and an action button — the toolbar pattern most apps actually need.
Open
19 Pure CSS
Hero Search
Big landing-page search with a subtle gradient halo behind it — the kind you put front-and-centre on a marketing site.
Open
20 Pure CSS
Side Indicator
A 3px coloured rail on the left edge of the input shifts colour on focus — minimal but unmistakable signal.
Open
21 Pure CSS
Drop Shadow Float
Subtle elevation lift on focus — a soft transform + larger drop-shadow makes the input feel like it raised toward the user.
Open
22 Pure CSS
Search + Filter
Two-column shell: input on the left, scope dropdown on the right, divided by a vertical hairline. The pattern of choice for ecommerce.
Open
23 CSS + JS
Inline Loading Bar
A thin progress bar slides across the bottom of the input while results are loading — gentler than a full spinner for live-search UX.
Open
24 Pure CSS
Dual Tone Outline
The border is split into two halves — left edge stays neutral while the right half lights up violet on focus. A subtle "active half" cue.
Open
25 Pure CSS
Glitch Search
RGB-split glitch shudders across the placeholder when focused — leans into a hacker / dev-tool aesthetic.
Open
26 Pure CSS
Compact Mobile
Mobile-first compact pattern — generous tap target, soft rounded chrome, single-line visual rhythm. Ideal for thumb-reach.
Open
27 Pure CSS
Focus Ring Bloom
A soft expanding violet halo blooms outward when the input gains focus — disappears smoothly on blur.
Open
28 CSS + JS
Combo with Scope
Scope dropdown ("All / People / Posts / Files") inline with the input — the pattern Slack, Linear, and GitHub all converged on.
Open
29 Pure CSS
Inset Pressed
Skeuomorphic inset shadow makes the input look pressed into the surface — a return to depth without the kitsch.
Open
30 Pure CSS
Border Trace
On focus, two halves of a border trace simultaneously around the input — a clean line-drawing reveal. No box-shadow, no gradients.
Open
31 Pure CSS
Floating Card
The whole search bar lifts off the page on focus with a soft shadow and a tiny scale-up — a tactile "pick me up" feel.
Open
32 Pure CSS
Aurora Drift
A soft aurora-style gradient blob drifts gently behind the input on a slow, subtle loop — the premium-feel signal without spinning chrome aberration.
Open