Glass Search
A frosted search field with a built-in icon — the kind of search bar that hovers over a hero image or video without competing.
The code
<div class="gm-search-bg">
<label class="gm-search">
<svg
class="gm-search__icon"
width="14"
height="14"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2.2"
stroke-linecap="round"
>
<circle cx="11" cy="11" r="7" />
<path d="M20 20l-4-4" />
</svg>
<input class="gm-search__field" type="search" placeholder="Search components, tags, demos…" />
<kbd class="gm-search__kbd">⌘K</kbd>
</label>
</div> <div class="gm-search-bg">
<label class="gm-search">
<svg
class="gm-search__icon"
width="14"
height="14"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2.2"
stroke-linecap="round"
>
<circle cx="11" cy="11" r="7" />
<path d="M20 20l-4-4" />
</svg>
<input class="gm-search__field" type="search" placeholder="Search components, tags, demos…" />
<kbd class="gm-search__kbd">⌘K</kbd>
</label>
</div>.gm-search-bg {
position: relative; padding: 28px;
border-radius: 18px; overflow: hidden;
background:
radial-gradient(ellipse at 30% 50%, #0ea5e9 0%, transparent 50%),
radial-gradient(ellipse at 70% 50%, #8b5cf6 0%, transparent 50%),
#0a1428;
}
.gm-search {
display: flex; align-items: center; gap: 10px;
background: rgba(255, 255, 255, 0.08);
-webkit-backdrop-filter: blur(22px) saturate(160%);
backdrop-filter: blur(22px) saturate(160%);
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 12px;
padding: 10px 14px;
}
.gm-search__icon { color: rgba(255, 255, 255, 0.55); flex-shrink: 0; }
.gm-search__field {
flex: 1;
background: none; border: none; outline: none;
color: #fff;
font: 13px system-ui, sans-serif;
}
.gm-search__field::placeholder { color: rgba(255, 255, 255, 0.55); }
.gm-search__kbd {
font: 600 10px ui-monospace, monospace;
color: rgba(255, 255, 255, 0.55);
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 5px;
padding: 3px 6px;
} .gm-search-bg {
position: relative; padding: 28px;
border-radius: 18px; overflow: hidden;
background:
radial-gradient(ellipse at 30% 50%, #0ea5e9 0%, transparent 50%),
radial-gradient(ellipse at 70% 50%, #8b5cf6 0%, transparent 50%),
#0a1428;
}
.gm-search {
display: flex; align-items: center; gap: 10px;
background: rgba(255, 255, 255, 0.08);
-webkit-backdrop-filter: blur(22px) saturate(160%);
backdrop-filter: blur(22px) saturate(160%);
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 12px;
padding: 10px 14px;
}
.gm-search__icon { color: rgba(255, 255, 255, 0.55); flex-shrink: 0; }
.gm-search__field {
flex: 1;
background: none; border: none; outline: none;
color: #fff;
font: 13px system-ui, sans-serif;
}
.gm-search__field::placeholder { color: rgba(255, 255, 255, 0.55); }
.gm-search__kbd {
font: 600 10px ui-monospace, monospace;
color: rgba(255, 255, 255, 0.55);
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 5px;
padding: 3px 6px;
}