Back to CSS Tags & Chips Gradient Edge Pure CSS
Share
.ctc-edge { display: flex; gap: 8px; }

.ctc-edge-chip { position: relative; display: inline-flex; align-items: center; padding: 8px 16px; background: #15151d; color: #c4b5fd; border-radius: 4px; font: 600 12px/1 system-ui, sans-serif; text-decoration: none; overflow: hidden; transition: background 0.2s, color 0.2s; }

.ctc-edge-chip::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, #7c6cff, #ff6c8a); transform: scaleX(0.4); transform-origin: left center; transition: transform 0.3s ease; }

.ctc-edge-chip:hover { background: #1f1f2e; color: #fff; }

.ctc-edge-chip:hover::after { transform: scaleX(1); }
<div class="ctc-edge">
  <a href="#" class="ctc-edge-chip">Frontend</a>
  <a href="#" class="ctc-edge-chip">Backend</a>
  <a href="#" class="ctc-edge-chip">DevOps</a>
</div>
Live preview Edit any tab — preview updates live Ready