Tinted Glass
Each glass surface tints subtly with its own brand hue while sharing the same blur — useful for color-coded categories.
The code
<div class="gm-tint-bg">
<div class="gm-tint gm-tint--violet">
<span class="gm-tint__dot"></span>
<div><b>Components</b><small>13 collections</small></div>
</div>
<div class="gm-tint gm-tint--rose">
<span class="gm-tint__dot"></span>
<div><b>Motion</b><small>4 collections</small></div>
</div>
<div class="gm-tint gm-tint--cyan">
<span class="gm-tint__dot"></span>
<div><b>Tools</b><small>11 utilities</small></div>
</div>
</div> <div class="gm-tint-bg">
<div class="gm-tint gm-tint--violet">
<span class="gm-tint__dot"></span>
<div><b>Components</b><small>13 collections</small></div>
</div>
<div class="gm-tint gm-tint--rose">
<span class="gm-tint__dot"></span>
<div><b>Motion</b><small>4 collections</small></div>
</div>
<div class="gm-tint gm-tint--cyan">
<span class="gm-tint__dot"></span>
<div><b>Tools</b><small>11 utilities</small></div>
</div>
</div>.gm-tint-bg {
position: relative; padding: 22px;
border-radius: 18px; overflow: hidden;
display: flex; flex-direction: column; gap: 8px;
background:
radial-gradient(circle at 50% 50%, #e2e8f0 0%, transparent 60%),
linear-gradient(135deg, #475569, #1e293b);
}
.gm-tint {
display: flex; align-items: center; gap: 12px;
-webkit-backdrop-filter: blur(20px) saturate(180%);
backdrop-filter: blur(20px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 10px;
padding: 10px 14px;
color: #fff;
}
.gm-tint b { display: block; font: 700 12px system-ui, sans-serif; }
.gm-tint small { font: 11px system-ui, sans-serif; opacity: 0.7; }
.gm-tint__dot { width: 10px; height: 10px; border-radius: 50%; }
.gm-tint--violet { background: rgba(139, 92, 246, 0.22); }
.gm-tint--violet .gm-tint__dot { background: #c4b5fd; box-shadow: 0 0 8px rgba(196, 181, 253, 0.6); }
.gm-tint--rose { background: rgba(244, 63, 94, 0.22); }
.gm-tint--rose .gm-tint__dot { background: #fda4af; box-shadow: 0 0 8px rgba(253, 164, 175, 0.6); }
.gm-tint--cyan { background: rgba(6, 182, 212, 0.22); }
.gm-tint--cyan .gm-tint__dot { background: #67e8f9; box-shadow: 0 0 8px rgba(103, 232, 249, 0.6); } .gm-tint-bg {
position: relative; padding: 22px;
border-radius: 18px; overflow: hidden;
display: flex; flex-direction: column; gap: 8px;
background:
radial-gradient(circle at 50% 50%, #e2e8f0 0%, transparent 60%),
linear-gradient(135deg, #475569, #1e293b);
}
.gm-tint {
display: flex; align-items: center; gap: 12px;
-webkit-backdrop-filter: blur(20px) saturate(180%);
backdrop-filter: blur(20px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 10px;
padding: 10px 14px;
color: #fff;
}
.gm-tint b { display: block; font: 700 12px system-ui, sans-serif; }
.gm-tint small { font: 11px system-ui, sans-serif; opacity: 0.7; }
.gm-tint__dot { width: 10px; height: 10px; border-radius: 50%; }
.gm-tint--violet { background: rgba(139, 92, 246, 0.22); }
.gm-tint--violet .gm-tint__dot { background: #c4b5fd; box-shadow: 0 0 8px rgba(196, 181, 253, 0.6); }
.gm-tint--rose { background: rgba(244, 63, 94, 0.22); }
.gm-tint--rose .gm-tint__dot { background: #fda4af; box-shadow: 0 0 8px rgba(253, 164, 175, 0.6); }
.gm-tint--cyan { background: rgba(6, 182, 212, 0.22); }
.gm-tint--cyan .gm-tint__dot { background: #67e8f9; box-shadow: 0 0 8px rgba(103, 232, 249, 0.6); }