Design for AITarjeta de pago brillante
Tarjeta de pago brillante: tarjeta en CSS. Copia las reglas, o el prompt que reproduce el resultado.
BANK
•••• •••• •••• 4242
Card holderA. ExampleExpires09/29
CSS
.card-087 {
position: relative;
width: 320px;
height: 200px;
padding: 22px 24px;
box-sizing: border-box;
border-radius: 18px;
background: linear-gradient(135deg,#1e1b4b,#4c1d95 50%,#0f172a);
color: #fff;
font-family: system-ui,sans-serif;
box-shadow: 0 20px 40px -12px rgba(76,29,149,.6);
overflow: hidden;
transition: transform .3s
}
.card-087::before {
content: "";
position: absolute;
width: 260px;
height: 260px;
right: -100px;
top: -120px;
border-radius: 50%;
background: rgba(255,255,255,.07)
}
.card-087:hover {
transform: translateY(-4px) rotate(-1deg)
}
.card-087__top {
display: flex;
justify-content: space-between;
align-items: center
}
.card-087__chip {
width: 42px;
height: 30px;
border-radius: 6px;
background: linear-gradient(135deg,#fde68a,#d97706);
box-shadow: inset 0 0 0 1px rgba(0,0,0,.2)
}
.card-087__top b {
font-size: 14px;
letter-spacing: .2em
}
.card-087__num {
margin: 28px 0 22px;
font-family: ui-monospace,monospace;
font-size: 20px;
letter-spacing: .14em
}
.card-087__bottom {
display: flex;
justify-content: space-between;
font-size: 13px;
font-weight: 600
}
.card-087__bottom span {
display: flex;
flex-direction: column
}
.card-087 small {
font-size: 9px;
font-weight: 400;
letter-spacing: .1em;
text-transform: uppercase;
opacity: .65;
margin-bottom: 2px
}
HTML
<div class="card-087">
<div class="card-087__top"><span class="card-087__chip"></span><b>BANK</b></div>
<p class="card-087__num">•••• •••• •••• 4242</p>
<div class="card-087__bottom"><span><small>Card holder</small>A. Example</span><span><small>Expires</small>09/29</span></div>
</div>Prompt
Construye un visual de tarjeta de pago de 320x200px: radio 18px, degradado a 135deg de #1e1b4b a #4c1d95 a #0f172a, un círculo blanco grande y tenue (7% de opacidad) que se sale por la esquina superior derecha, y una sombra teñida de púrpura. Fila superior: un chip degradado dorado de 42x30px (de #fde68a a #d97706, radio 6px) y una marca "BANK" con letras espaciadas. Medio: un número enmascarado en monospace "•••• •••• •••• 4242" a 20px con letter-spacing .14em. Fila inferior: etiquetas diminutas en mayúsculas "Card holder" y "Expires" sobre valores 13px semibold. La tarjeta se eleva 4px y se inclina -1deg en hover. Solo valores de ejemplo.