Back to CSS Tags & Chips Glassmorphic Pure CSS
Share
.ctc-glass-bg { display: flex; gap: 8px; flex-wrap: wrap; padding: 24px; border-radius: 14px; background: linear-gradient(135deg, #7c6cff 0%, #ff6c8a 100%); }

.ctc-glass { display: inline-flex; align-items: center; padding: 7px 14px; border-radius: 999px; background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.3); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.4); color: #fff; font: 600 12px/1 system-ui, sans-serif; text-decoration: none; transition: background 0.2s; }

.ctc-glass:hover { background: rgba(255,255,255,0.28); }
<div class="ctc-glass-bg">
  <a href="#" class="ctc-glass">Glass</a>
  <a href="#" class="ctc-glass">Frosted</a>
  <a href="#" class="ctc-glass">Blur</a>
</div>
Live preview Edit any tab — preview updates live Ready