Design for AIEstadística en relieve oscuro
Estadística en relieve oscuro: tarjeta en CSS. Copia las reglas, o el prompt que reproduce el resultado.
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%
}
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>Prompt
Crea una tarjeta de estadística neumórfica oscura sobre una superficie #2b2f36: 240px de ancho, mismo fondo, radio 18px, sombra doble 8px 8px 16px #1f2227 y -8px -8px 16px #373c41. Contenido: etiqueta en mayúsculas 12px #9ca3af "Active users", un número 32px bold "12,480" en #e5e7eb, y una pista de progreso de 12px de alto hundida en la superficie con sombras inset, que contiene una barra píldora al 64% de ancho rellena con un degradado a 90deg de #22d3ee a #818cf8 que crece al 72% en hover.