# Glänzende Bezahlkarte (C 087)

Kategorie: Cards  
Tags: payment, credit-card, dark, gradient, chip, glossy  
Seite: https://designforai.dev/de/snippet/card-087

## Prompt

Baue ein 320x200px Bezahlkarten-Visual: 18px Radius, 135deg Gradient #1e1b4b zu #4c1d95 zu #0f172a, ein zarter großer weißer Kreis (7% Deckkraft), der oben rechts über den Rand ragt, und ein violett getönter Schatten. Obere Zeile: ein 42x30px goldener Gradient-Chip (#fde68a zu #d97706, 6px Radius) und eine gesperrt gesetzte Wortmarke "BANK". Mitte: eine maskierte Monospace-Nummer "•••• •••• •••• 4242" bei 20px mit .14em Laufweite. Untere Zeile: winzige Versalien-Labels "Card holder" und "Expires" über 13px semibold Werten. Die Karte hebt sich beim Hover 4px und neigt sich um -1deg. Nur Platzhalterwerte.

## HTML

```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>
```

## CSS

```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
}
```