Tarjeta de pago de cristal
Una tarjeta transparente con cantos gruesos que deforman las formas de detrás; tócala y gira con un destello.
Ajustes
Código
<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="Girar la tarjeta"><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">Tarjeta de demostración</span></span><span class="sw"></span></button></div>Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Liquid Glass
Ver todos: Liquid GlassDónde usarlo
Una tarjeta de pago transparente sobre formas grandes que se mueven despacio, para que el vidrio tenga algo que deformar. La cara usa un desenfoque de fondo leve, mientras una banda enmascarada en el borde desenfoca y aclara más para simular el canto grueso y pulido. Número, chip y símbolo sin contacto van grabados delante, y detrás hay banda, panel de firma y código.
Cambia los dos colores del fondo y escribe el nombre del titular. El giro es un único botón con un barrido de luz por la superficie, y funciona en webs de fintech, vistas previas del pago y páginas de socios premium.