Design for AIAnillo degradado y habilidades
Anillo degradado y habilidades: tarjeta en CSS. Copia las reglas, o el prompt que reproduce el resultado.
Kenji Watanabe
Motion designer · Tokyo
CSS
.card-068 {
width: 250px;
padding: 26px 20px 22px;
text-align: center;
background: #fff;
border-radius: 18px;
box-shadow: 0 2px 12px rgba(0,0,0,.06);
font-family: system-ui,sans-serif;
color: #111827
}
.card-068__ring {
width: 84px;
height: 84px;
margin: 0 auto 14px;
padding: 4px;
border-radius: 50%;
background: conic-gradient(#f97316,#ec4899,#8b5cf6,#f97316);
transition: transform .3s
}
.card-068__ring span {
display: block;
width: 100%;
height: 100%;
border-radius: 50%;
border: 3px solid #fff;
background: linear-gradient(135deg,#fde68a,#fb923c)
}
.card-068:hover .card-068__ring {
transform: rotate(180deg) scale(1.05)
}
.card-068 h3 {
margin: 0;
font-size: 17px
}
.card-068 p {
margin: 4px 0 14px;
font-size: 13px;
color: #6b7280
}
.card-068__tags {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 6px
}
.card-068__tags i {
padding: 4px 10px;
border-radius: 999px;
background: #f3f4f6;
font-style: normal;
font-size: 11px;
font-weight: 600;
color: #374151
}
HTML
<article class="card-068">
<div class="card-068__ring"><span></span></div>
<h3>Kenji Watanabe</h3>
<p>Motion designer · Tokyo</p>
<div class="card-068__tags"><i>After Effects</i><i>Rive</i><i>CSS</i></div>
</article>Prompt
Construye una tarjeta de perfil centrada de 250px: blanca, radio 18px, sombra suave 0 2px 12px rgba(0,0,0,.06). Un avatar de 84px con un anillo conic-gradient de 4px (#f97316, #ec4899, #8b5cf6) alrededor de un hueco blanco de 3px y un relleno degradado cálido; el anillo rota 180deg y escala a 1.05 en hover durante 300ms. Nombre 17px, rol 13px #6b7280, y una fila con ajuste de etiquetas píldora ("After Effects", "Rive", "CSS") en #f3f4f6 con texto 11px semibold #374151.