CSS Showcase · Live Demo

Search that finds its shape.

One search experience with live client-side filtering — an inline bar, a command palette, filter chips, an expanding icon, and a full-screen overlay for mobile.

Featured demo

mobile · expanding

mobile design patterns

search-expanding.css
/* Icon expands into a full-width field */
.expand-search {
  display: flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid hsl(var(--border));
  overflow: hidden;
  transition: width 0.3s ease;
}

.expand-search[data-open="false"] {
  width: 2.25rem;
}

.expand-search[data-open="true"] {
  width: 100%;
}

.expand-search input {
  opacity: 0;
  transition: opacity 0.2s ease 0.1s;
}

.expand-search[data-open="true"] input {
  opacity: 1;
}

CSS features used

  • • Container queries
  • • Live client-side filtering
  • • Width transitions
  • • Absolute overlay positioning
  • • Keyframe fade-in
  • • Semantic tokens