Design for AICartão de pagamento brilhante
Cartão de pagamento brilhante: um card em CSS. Copie as regras, ou o prompt que o reconstrói.
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
Construa um visual de cartão de pagamento de 320x200px: raio de 18px, gradiente de 135deg #1e1b4b para #4c1d95 para #0f172a, um grande círculo branco tênue (7% de opacidade) sangrando pelo canto superior direito, e uma sombra com tom roxo. Linha superior: um chip em gradiente dourado de 42x30px (#fde68a para #d97706, raio de 6px) e uma marca "BANK" com letras espaçadas. Meio: um número mascarado em monospace "•••• •••• •••• 4242" em 20px com letter-spacing .14em. Linha inferior: labels minúsculos em caixa alta "Card holder" e "Expires" sobre valores 13px semibold. O cartão sobe 4px e inclina -1deg no hover. Apenas valores de exemplo.