Dale la vuelta
HTML + CSSLiquid Glass
Hourglass timer
A glass hourglass that counts real seconds; press it and it flips over on a spring to start again.
Settings
16px
1x
20s
Code
<div class="uvq11-hg"><button type="button" class="hb" aria-label="Turn the hourglass over"><span class="fl"><svg viewBox="0 0 100 170" aria-hidden="true"><defs><clipPath id="uvq11-hg-c"><path d="M20 12H80C80 52 54 70 52 85C54 100 80 118 80 158H20C20 118 46 100 48 85C46 70 20 52 20 12Z"/></clipPath><linearGradient id="uvq11-hg-w" x1="0" x2="1"><stop offset="0" stop-color="#3a2014"/><stop offset=".45" stop-color="#9a6a45"/><stop offset="1" stop-color="#3a2014"/></linearGradient></defs><path class="po" d="M13 12V158M87 12V158"/><g clip-path="url(#uvq11-hg-c)"><path class="sd st" d="M10 34Q50 34 90 34V86H10Z"/><path class="sd sb" d=""/><path class="fa" d="M50 84V150"/></g><path class="gs" d="M20 12H80C80 52 54 70 52 85C54 100 80 118 80 158H20C20 118 46 100 48 85C46 70 20 52 20 12Z"/><path class="hl" d="M27 20C27 46 38 62 44 74M27 150C27 126 38 110 44 98"/><rect x="6" y="3" width="88" height="10" rx="3" fill="url(#uvq11-hg-w)"/><rect x="6" y="157" width="88" height="10" rx="3" fill="url(#uvq11-hg-w)"/></svg></span></button><div class="tx"><output class="tm">0:20</output><span>Turn it over</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
A countdown shaped like an hourglass, drawn in SVG with wooden caps, posts and a glass body with soft highlights. The sand drains from the top bulb, falls in a thin stream and builds a mound below while the time ticks down beside it. Tap the glass and the whole piece flips with an overshoot before restarting.
Set the duration in seconds with its slider and pick the sand and wood colors. It works well for focus timers, cooking steps, quiz rounds or any moment where waiting should feel calm and tangible.