Design for AIAnel gradiente com habilidades
Anel gradiente com habilidades: um card em CSS. Copie as regras, ou o prompt que o reconstrói.
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
Construa um card de perfil centralizado de 250px: branco, raio de 18px, sombra suave 0 2px 12px rgba(0,0,0,.06). Um avatar de 84px com um anel conic-gradient de 4px (#f97316, #ec4899, #8b5cf6) ao redor de um espaço branco de 3px e um preenchimento em gradiente quente; o anel rotaciona 180deg e escala para 1.05 no hover em 300ms. Nome 17px, cargo 13px #6b7280, e uma linha com quebra de tags em pílula ("After Effects", "Rive", "CSS") em #f3f4f6 com texto 11px semibold #374151.