Clear glass payment card
A transparent card with thick edges that warp the shapes behind it; tap it and it flips with a flash of light.
Settings
Code
<div class="uvq11-card"><div class="bg" aria-hidden="true"><i class="o1"></i><i class="o2"></i><i class="o3"></i><i class="o4"></i></div><button type="button" class="cd" aria-pressed="false" aria-label="Flip the card"><span class="fc fr"><span class="ed"></span><span class="tp"><b class="lg">AIMRAN</b><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8.5 8.5a5 5 0 0 1 0 7M12 6a8.5 8.5 0 0 1 0 12M15.5 3.5a12 12 0 0 1 0 17"/></svg></span><span class="chp"></span><span class="nu">4821 •••• •••• 0427</span><span class="bt"><span class="nm">LUCÍA MARTÍN</span><span class="ex">09/29</span></span></span><span class="fc bk"><span class="ed"></span><span class="ms"></span><span class="sg"><i></i><b>482</b></span><span class="fn">Demo card</span></span><span class="sw"></span></button></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 see-through payment card over bold drifting shapes, so the glass has something to bend. The face uses a light backdrop blur, while a masked border band blurs and brightens more to fake the thick polished edge. Number, chip and contactless mark sit etched on the front, and the back shows a stripe, signature panel and code.
Change the two background colors and type the cardholder name. The flip is a single toggle button with a light sweep across the surface, and it works for fintech landings, checkout previews and premium membership pages.