Conic Gradient Glow Avatar

Colours in this gradient

• #0f172a
• #ec4899
• #8b5cf6
• #10b981

The code

Plain HTML and CSS with no dependencies. Copy a single file, or choose "Full file" for a complete page you can save as index.html and open in a browser.

<div class="avatar-stage">
  <div class="avatar-card">
    <div class="avatar-ring-wrap">
      <div class="avatar-conic-glow"></div>
      <div class="avatar-img-frame">
        <div class="avatar-inner-art">👨‍💻</div>
      </div>
      <div class="avatar-online-dot">
        <span class="dot-pulse"></span>
        <span class="dot-core"></span>
      </div>
    </div>
    <div class="avatar-name">
      Alex Mercer
      <span class="avatar-verified" title="Verified Staff">✓</span>
    </div>
    <div class="avatar-role">Principal Staff Architect</div>
    <div class="avatar-status-pill">● Available for advisory</div>
  </div>
</div>

The AI prompt

Paste this into an AI coding tool to generate the same component, then ask it to adapt the colours, text or framework to your project.

Create an animated conic gradient glow avatar profile card in HTML and CSS.

Requirements:
- Conic gradient spinning border ring around profile avatar.
- Bottom-right online presence status dot with pulsing ripple ring.
- Verified badge icon next to name.
- Centered card layout with role and availability status pill.

Return one HTML file with a <style> block.

How to build it, step by step

1. 1

   Create conic-gradient background and spin with transform: rotate(360deg).

2. 2

   Place inner avatar frame with inset: 2px and border-radius: 50% to hide the center of the gradient.

3. 3

   Add pulsing online dot with expanding opacity keyframes.

Customisation tips

• Use filter: drop-shadow to give the conic ring an organic holographic glow.

More components