Recientes
CafeteríasGasolinerasFarmacias de guardiaGlass search bar
A glass search bar that stretches when focused, reveals a Cancel button and shows recent searches.
Settings
Code
<div class="uv-gsb"><div class="br"><label class="fd"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="6.5"/><path d="M20 20l-4.2-4.2"/></svg><input type="search" placeholder="Search" aria-label="Search"><span class="mc"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="9" y="3" width="6" height="11" rx="3"/><path d="M5.5 11a6.5 6.5 0 0 0 13 0M12 17.5V21"/></svg></span></label><button type="button" class="cn">Cancel</button></div><div class="sg"><p>Recent</p><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="8.5"/><path d="M12 7.5V12l3 2"/></svg>Cafés</span><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="8.5"/><path d="M12 7.5V12l3 2"/></svg>Gas stations</span><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="8.5"/><path d="M12 7.5V12l3 2"/></svg>Late-night pharmacies</span></div></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Liquid Glass
See all Liquid GlassWhere to use it
Floating search bars in maps, music and shopping apps now sit on top of the content as frosted glass. This one blurs and saturates the sunset behind it, gains a brighter rim when focused, makes room for a Cancel button that slides in, and opens a glass panel of recent searches below with a soft spring.
All states come from :focus-within, so the bar works without JavaScript except for clearing the field on Cancel. Two sliders control the blur and the tint of the glass, which lets you match light or dark wallpapers and keep the text readable everywhere.