Design for AIGradient-Ring Skills
Gradient-Ring Skills: CSS-Card. Kopiere die Regeln oder den Prompt, der das Ergebnis nachbaut.
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
Baue eine 250px zentrierte Profil-Card: weiß, 18px Radius, weicher Schatten 0 2px 12px rgba(0,0,0,.06). Ein 84px Avatar mit 4px conic-gradient Ring (#f97316, #ec4899, #8b5cf6) um einen 3px weißen Abstand und eine warme Gradient-Füllung; der Ring dreht sich beim Hover über 300ms um 180deg und skaliert auf 1.05. 17px Name, 13px #6b7280 Rolle und eine umbrechende Reihe aus Pillen-Tags ("After Effects", "Rive", "CSS") in #f3f4f6 mit 11px semibold #374151 Text.