# Gradient ring skills (C 068)

Category: Cards  
Tags: profile, avatar, gradient-ring, tags, light, hover  
Page: https://designforai.dev/snippet/card-068

## Prompt

Build a 250px centered profile card: white, 18px radius, soft shadow 0 2px 12px rgba(0,0,0,.06). An 84px avatar with a 4px conic-gradient ring (#f97316, #ec4899, #8b5cf6) around a 3px white gap and a warm gradient fill; the ring rotates 180deg and scales to 1.05 on hover over 300ms. 17px name, 13px #6b7280 role, and a wrapped row of pill tags ("After Effects", "Rive", "CSS") in #f3f4f6 with 11px semibold #374151 text.

## HTML

```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>
```

## CSS

```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
}
```