# Dunkle geprägte Kennzahl (C 031)

Kategorie: Cards  
Tags: neumorphic, soft-ui, dark, stat, embossed  
Seite: https://designforai.dev/de/snippet/card-031

## Prompt

Erstelle eine dunkle neumorphe Kennzahl-Card auf einer #2b2f36 Fläche: 240px breit, gleicher Hintergrund, 18px Radius, Doppelschatten 8px 8px 16px #1f2227 und -8px -8px 16px #373c41. Inhalt: 12px #9ca3af Versalien-Label "Active users", eine 32px fette Zahl "12,480" in #e5e7eb und eine 12px hohe Fortschrittsspur, mit inneren Schatten in die Fläche gedrückt, die einen Pillen-Balken bei 64% Breite hält, gefüllt mit einem 90deg Gradient #22d3ee zu #818cf8, der beim Hover auf 72% wächst.

## HTML

```html
<div class="card-031-bg">
  <article class="card-031">
    <span>Active users</span>
    <strong>12,480</strong>
    <div class="card-031__bar"><i></i></div>
  </article>
</div>
```

## CSS

```css
.card-031-bg {
  display: inline-block;
  padding: 36px;
  background: #2b2f36;
  border-radius: 24px
}
.card-031 {
  width: 240px;
  padding: 22px;
  background: #2b2f36;
  border-radius: 18px;
  box-shadow: 8px 8px 16px #1f2227,-8px -8px 16px #373c41;
  font-family: system-ui,sans-serif;
  color: #e5e7eb
}
.card-031 span {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #9ca3af
}
.card-031 strong {
  display: block;
  margin: 6px 0 16px;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -.02em
}
.card-031__bar {
  height: 12px;
  border-radius: 999px;
  background: #2b2f36;
  box-shadow: inset 3px 3px 6px #1f2227,inset -3px -3px 6px #373c41;
  padding: 3px
}
.card-031__bar i {
  display: block;
  width: 64%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg,#22d3ee,#818cf8);
  transition: width .4s
}
.card-031:hover .card-031__bar i {
  width: 72%
}
```