You just browsed 36 searches. Nucleo is a library of 44,000+ SVG icons in five families (Core, UI, Sharp, Pixel and Micro Bold), with web, Mac and Windows apps to manage them. The All Icons Bundle is $149 with lifetime updates.
The ⌘K palette every modern product ships — a native <dialog> that opens on Command/Control + K, filters grouped commands, pages and people as you type, moves an active option with the arrow keys through aria-activedescendant, and returns focus to the trigger on Escape. Blurred ::backdrop, a spring-in with @starting-style, and empty groups that hide themselves with :has().
An instant-search dropdown in the DocSearch/Algolia idiom: focus the field and a panel opens with results grouped under Products, Categories and Help articles, each row a thumbnail or icon plus title, description and the matched substring wrapped in <mark>. The reveal is :focus-within — no JavaScript at all.
The retailer pattern: a department <select> on the left, the query in the middle, a solid submit button on the right, all fused into one 48px bar inside a mock storefront header. Trending suggestions open on :focus-within; the submit button spins for the round trip via a data-state flip.
A marketing header where the search field collapses to an icon as the page scrolls and re-expands the moment you focus it. The shrink is a real scroll-driven animation (animation-timeline: scroll()) with an IntersectionObserver fallback, so it is smooth on modern browsers and correct everywhere else.
The persistent dashboard topbar search: focus it and a rich panel opens with Recent (clock icons), Suggested (sparkle icons) and Quick actions with real ⌘ shortcuts. Dark-first, arrow-key navigable, and mounted in a mock admin shell so you can see it in context.
A borderless, editorial search field: no box, no shadow, just type on a hairline that draws itself outward from the centre on focus. Two stacked rules — a static hairline and an accent line scaled with transform: scaleX() — give a 60fps underline with zero layout cost.
Newsletter
Enjoying these demos? Get new ones by email.
A short email when a new collection ships. Unsubscribe any time.
A fully-rounded pill with the magnifier inside on the left and a filled submit button hugging the right edge — the iOS/Safari address-bar shape. The button reveals its "Search" label only when the pill has focus, so the resting state stays compact.
Frosted glass done properly: backdrop-filter: blur(20px) saturate(180%) over a slowly drifting colour field, a 1px inner highlight stroke that fakes the lit top edge of real glass, and a specular sheen that sweeps across on focus.
Cyan-and-magenta neon on near-black: the field's glow is a five-layer box-shadow — two tight inner rings for the tube, three wide outer washes for the bloom — and focus runs a slow hue-shifting pulse. Monospace type, scanline grid, zero JavaScript.
An editor-grade field: the native caret is hidden and replaced with a glowing block cursor that tracks the real text width, blinking on a 1.06s square wave and dragging a soft highlight wash behind it. Measured with a mirrored span — no canvas, no font metrics guesswork.
Tap the mic and the field enters a listening state: concentric rings pulse out of the button, a live waveform of CSS bars reacts, and the placeholder changes to a listening prompt. State is one data-state attribute plus aria-pressed — no Web Speech API needed to build or test the UI.
Type and the magnifier morphs into a spinner while results are fetched, then settles into a result count. The spinner is a single element — a conic gradient masked into a ring — and the whole state machine is one data-state attribute with aria-busy for assistive tech.
The clear × appears only once you have typed — and the appearing is done entirely in CSS with :not(:placeholder-shown), no input listener required. Five lines of JavaScript clear the value and hand focus back to the field, which is the part CSS cannot do.
A 44px circle that unfurls into a full search field when focused and folds back when you leave — the toolbar pattern from Gmail, Figma and every dense app header. Pure CSS: :focus-within drives an eased inline-size transition, and the input keeps its accessible name the whole time.
Newsletter
Enjoying these demos? Get new ones by email.
A short email when a new collection ships. Unsubscribe any time.
The plain, fast autocomplete: focus the field and five suggestions slide down under it, each with a category glyph and a keyboard-affordance chevron. No JavaScript — the panel is a :focus-within reveal, styled to sit flush with the input so the two read as one surface.
The documentation-site classic: a quiet search field with a <kbd> chip pinned inside the right edge, showing ⌘K on Mac and Ctrl K on Windows/Linux. Focus the field with the shortcut and the chip flips to an <kbd>esc</kbd> hint.
Filters live inside the field as removable chips sitting before the caret, GitHub/Linear style. The wrapper is a wrapping flex container, the input is a flex:1 child with a minimum width, and Backspace on an empty query pops the last chip — the interaction people expect and almost nobody implements.
Focus the field and your recent searches drop down — each with a clock glyph, a real <time> stamp and its own remove button, plus a "Clear all" action in the header. History persists in localStorage in ten lines.
The placeholder cycles through four real example queries — wireless headphones, invoice template, Q3 revenue, team photo — on a stacked-keyframe rotator with a blinking type cursor. It disappears the instant you type, and it is 100% CSS: the real placeholder attribute stays empty-but-present so :placeholder-shown still works.
The team-picker: selected people sit in the field as avatar chips, and typing filters a list of teammates with photos, roles and presence dots. Click or press Enter to add, click the chip's × (or Backspace) to remove — the assignee/mention pattern from Linear, Jira and Slack.
Chunky 3px borders, zero-blur offset shadows, unapologetic yellow, and a rotated SEARCH stamp that snaps flat when you focus. The press interaction is the one everyone gets wrong: the shadow shrinks by exactly the distance the element moves, so the object looks pressed rather than shifted.
A 200px search sized for a documentation sidebar: small type, tight 36px height, a quiet border that only asserts itself on focus, and a version chip below. Built as part of a real nav so you can see the density it is designed for.
Newsletter
Enjoying these demos? Get new ones by email.
A short email when a new collection ships. Unsubscribe any time.
A landing-page hero built around search: an oversized field with a solid CTA fused to its right edge, a fluid headline above and popular-query chips below. Everything scales with clamp(), and the CTA drops under the field on narrow screens without a media-query pile-up.
A colour-coded search: pick Files, People, Messages or Code and a vertical bar on the input's leading edge changes colour and label to match. The state machine is a radio group read by :has() — no JavaScript, and the whole thing stays keyboard-operable because the controls are real radios.
Elevation done like a designer, not a default: a four-layer shadow stack (contact, ambient, mid, far) that mimics real light falloff, plus a lift on hover and a deeper drop on focus. The same tokens give you a documented elevation scale you can reuse across a product.
A faceted-search sidebar: search at the top, then category checkboxes with result counts, a price range and an in-stock toggle. Every control is a native input styled with appearance:none, so keyboard, screen-reader and mobile behaviour are the browser's — not yours.
A hairline progress bar rides the field's bottom edge: an indeterminate sweep while the request is in flight, then a determinate fill to 100% and a fade-out. Two keyframes, one data-state, and a real role="progressbar" for assistive tech.
A cyan→magenta gradient border that stays crisp at any radius — built with the double-background background-clip technique (border-box gradient under a padding-box fill), then set spinning on focus by animating a registered <angle>.
Chromatic aberration on a search field: the label splits into red and cyan ghosts that drift a pixel or two at rest and tear into clipped slices on focus. Built from two ::before/::after copies driven by attr() content and clip-path keyframes.
Sized for thumbs: a 44×44 minimum target, 16px text (so iOS never zooms on focus), an inset pressed state, and an iOS-style Cancel link that slides in on focus. Includes env(safe-area-inset-*) padding for notched devices.
A focus indicator with a moment of delight and no accessibility cost: on focus a soft ring blooms outward once and settles into a persistent 4px halo. The persistent ring is what satisfies WCAG; the bloom is the 320ms that makes the interface feel alive.
The developer-tool combo: a scope button on the left ("All files ▾") opening a menu of search scopes, with the query field beside it. The menu uses the Popover API — top-layer, light-dismiss and Escape handling with no JavaScript — plus CSS anchor positioning where available.
A field that looks carved into the surface: two inset shadows (dark from the top, light from the bottom) plus a 1px highlight on the lower lip. The 2027 take on neumorphism — depth without the contrast failures, because the text and icons stay on solid, accessible colours.
On focus, a single accent stroke runs around the field like a light travelling a wire, then settles into a full outline. Drawn with an inline SVG rounded rect and stroke-dashoffset — pixel-crisp at any size, and immune to the corner artefacts gradient-border tricks produce.
Search-as-overlay: click the header field and a raised card floats above a dimmed, blurred page with a large input and recent result cards. A native <dialog> handles focus trapping, Escape and the backdrop — the pattern behind Notion, Vercel and most editorial sites.
The "AI product" field: a slow aurora of teal, violet and rose drifting around the border while a soft bloom of the same hues pools underneath. Driven by an @property-registered <angle> so a conic gradient can actually animate — the technique that makes this look impossible in plain CSS.
↗
Build your own
Tweak the exact look in our visual generators — no signup, instant copy-paste.
How do I build a Cmd+K command palette search bar in CSS?
Use the native <dialog> element with showModal() — the browser handles focus trapping, backdrop rendering, and ESC-to-close for free. Listen for keydown on document checking e.metaKey || e.ctrlKey combined with e.key === 'k', then call dialog.showModal() and prevent the browser's default find shortcut. Style the backdrop via dialog::backdrop with backdrop-filter: blur(). Focus the search input on open (dialog.querySelector('input').focus()), return focus to the trigger on close. Demo 01 in this collection ships the full recipe with keyboard-shortcut hint (⌘K badge) and a recent-commands list. Notion, Linear, Vercel, and Raycast all use this pattern.
How do I build an Algolia-style instant search with a highlighted results dropdown?
Two layers: the visual reveal is pure CSS via :focus-within on the wrapper (dropdown appears when input is focused, no JS needed). The highlight-matching-text effect uses a <mark> element wrapping the matched substring, styled with an accent background. For a real integration you'd swap the static mock results for fetch('/api/search?q=' + query) on each input event with a 150-300ms debounce. Group results by category using <ul role='listbox'> with <li role='option'> items and aria-activedescendant on the input. Demo 02 ships the visual pattern; wire your search API on top.
What's the right HTML for a CSS search bar?
Wrap <input type='search'> inside a <form role='search'> with a real <label> (visually hidden if needed). The type='search' adds a clear button on Chromium browsers and triggers correct virtual keyboards on mobile; role='search' is the WAI-ARIA landmark so screen-reader users can jump directly to search from anywhere on the page. Never rely on placeholder alone as the label — screen readers don't announce placeholders reliably and low-vision users lose the label on focus. Every demo in this collection uses this pattern.
How do I make a clear button appear only when there's text in the search input?
Pure CSS, no JavaScript. Use the :placeholder-shown pseudo-class: when the field is empty the placeholder is shown, so input:placeholder-shown ~ .clear { opacity: 0; pointer-events: none; }. When the user types, the placeholder hides and the clear button becomes visible. Combine with :has() to drive parent state (e.g. show a border color change when there's typed content). Demo 13 ships this pattern with animation and ARIA on the clear button.
How do I add a search animation when the input is focused?
Animate on :focus or :focus-within. Common patterns: a collapsed icon-only bar that expands its width to a full input on focus (width transition), an underline that wipes in from left to right (transform: scaleX() on a ::after pseudo-element), a magnifier icon that slides and morphs into a clear-X (SVG stroke animation), an animated border trace (SVG stroke-dashoffset or conic-gradient with @property), or a soft glow ring (multi-layer box-shadow with transform: scale). All done with transition — zero JavaScript. Demos 06, 10, 14, 28, 31, 34 show six different focus-driven animation approaches.
How is this different from generic input collections like css-input-fields?
css-input-fields (28 demos) covers generic text/email/password/number/textarea patterns. css-floating-label-inputs (17 demos) covers the specific floating-label pattern across every input type. This collection focuses on **search-bar-specific product surfaces**: command palettes (⌘K), Algolia-style instant search dropdowns, e-commerce product search with category scope, header navbar sticky search that shrinks on scroll, SaaS dashboard command search with recent + suggested, plus 31 more design and interaction patterns where the search bar IS the primary UI. If you need a generic text input, use css-input-fields; if you need a search bar with product context, you're in the right place.
Are these CSS search bars accessible?
Yes. Every demo uses a real <label> associated with <input type='search'> inside a <form role='search'> landmark. Voice, clear, and submit buttons have aria-label describing the action. Autocomplete dropdowns implement the WAI-ARIA combobox pattern (aria-controls, aria-expanded, aria-activedescendant, role='listbox' on the dropdown, role='option' on items). Command palette (Demo 01) traps focus inside the <dialog> element, closes on ESC, and returns focus to the trigger. Every demo with motion respects @media (prefers-reduced-motion: reduce). Focus rings are visible on every interactive element (2px minimum, high contrast per WCAG 2.4.11).
Do I need JavaScript for autocomplete, recent searches, and voice input?
Yes for the data, no for most of the visuals. The dropdowns themselves open and close via :focus-within or :checked — pure CSS. JS is only needed to filter results based on typed input (with a 150-300ms debounce), persist recent searches in localStorage, or trigger the Web Speech API for real voice input. Command palette (Demo 01), instant search (Demo 02), e-commerce scope (Demo 03), navbar sticky (Demo 04), SaaS dashboard (Demo 05), voice input (Demo 11), and loading spinner (Demo 12) each ship self-contained JS snippets under 30 lines with zero dependencies — copy and adapt for your framework.
