{
CF
}
Code
Fronts
Back to CSS Glassmorphism
Glass Search
Pure CSS
Edit any tab — preview updates live
CSS
HTML
Reset
Copy
.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; }
<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>
Live preview
Ready