Hero Search

Big landing-page search with a subtle gradient halo behind it — the kind you put front-and-centre on a marketing site.

Pure CSS MIT licensed

Hero Search the 19th 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

Open in playground

The code

<form class="csb-hero" role="search">
  <label class="csb-sr" for="csb-hero-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-hero-i" type="search" name="q" placeholder="What are you looking for?" />
  <button type="submit">Search</button>
</form>

.csb-hero {
  position: relative; display: inline-flex; align-items: center;
  padding: 5px 5px 5px 14px; gap: 10px;
  background: #1a1a28;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  isolation: isolate;
  max-width: 100%;
}
.csb-hero::before {
  content: ''; position: absolute; inset: -20px; z-index: -1;
  background: radial-gradient(ellipse at center, rgba(124,108,255,0.4), transparent 70%);
  filter: blur(20px); opacity: 0.5;
  transition: opacity 0.3s;
}
.csb-hero:focus-within::before { opacity: 1; }
.csb-hero svg { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: #a78bfa; stroke-width: 2; stroke-linecap: round; }
.csb-hero input {
  width: 180px; padding: 10px 0;
  border: 0; outline: none; background: transparent;
  color: #f0eeff; font: 500 15px/1 system-ui, sans-serif;
  min-width: 0;
}
.csb-hero input::placeholder { color: #b8b6d4; }
.csb-hero button {
  padding: 9px 16px; flex-shrink: 0;
  border: 0; cursor: pointer;
  background: linear-gradient(135deg, #7c6cff, #ff6c8a);
  color: #fff; font: 600 13px/1 system-ui, sans-serif;
  border-radius: 10px;
}

.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

Glass Search Neon Outline Floating Label Caret Highlight Clear-on-Type Keyboard Hint Animated Placeholder Avatar Search Brutalist Stamp Compact Toolbar Side Indicator Drop Shadow Float

View the full collection →