Neon Glass SaaS
Dark glassmorphism with ambient orb drift, per-card neon accents, pulsing status dots, and a metrics strip. Use case: SaaS, developer tools, or tech platform. Syne for the metric numbers, JetBrains Mono for tags, four neon accent palettes (cyan/purple/green/orange).
Neon Glass SaaS the 4th of 15 designs in the 15 CSS Testimonials & Reviews collection. The design is implemented in pure CSS — no JavaScript required. Copy the HTML and CSS panels below into your project. Because the demo is pure CSS, it works in any framework or templating engine you happen to use. The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<section class="tm-nsa" aria-label="Customer testimonials">
<span class="tm-nsa-orb tm-nsa-o1" aria-hidden="true"></span>
<span class="tm-nsa-orb tm-nsa-o2" aria-hidden="true"></span>
<span class="tm-nsa-orb tm-nsa-o3" aria-hidden="true"></span>
<div class="tm-nsa-metrics">
<div class="tm-nsa-metric">
<div class="tm-nsa-mnum">4.9★</div>
<div class="tm-nsa-mlbl">Avg. Rating</div>
</div>
<div class="tm-nsa-metric">
<div class="tm-nsa-mnum">98%</div>
<div class="tm-nsa-mlbl">Recommend</div>
</div>
<div class="tm-nsa-metric">
<div class="tm-nsa-mnum">14K+</div>
<div class="tm-nsa-mlbl">Teams</div>
</div>
<div class="tm-nsa-metric">
<div class="tm-nsa-mnum">3.2×</div>
<div class="tm-nsa-mlbl">Avg. ROI</div>
</div>
</div>
<div class="tm-nsa-grid">
<article class="tm-nsa-card tm-nsa-c1">
<span class="tm-nsa-ca-line" aria-hidden="true"></span>
<span class="tm-nsa-gdot" aria-hidden="true"></span>
<div class="tm-nsa-ctag">// productivity</div>
<div class="tm-nsa-stars" aria-label="5 out of 5 stars">★★★★★</div>
<blockquote class="tm-nsa-q">"We retired three separate tools the week we went live. The <strong>consolidation alone</strong> saved us 12 hours a week."</blockquote>
<figcaption class="tm-nsa-author">
<span class="tm-nsa-av" aria-hidden="true">TK</span>
<span><cite class="tm-nsa-an">Takeshi Kato</cite><span class="tm-nsa-ar">Eng Lead · Lattice AI</span></span>
</figcaption>
</article>
<article class="tm-nsa-card tm-nsa-c2">
<span class="tm-nsa-ca-line" aria-hidden="true"></span>
<span class="tm-nsa-gdot" aria-hidden="true"></span>
<div class="tm-nsa-ctag">// enterprise</div>
<div class="tm-nsa-stars" aria-label="5 out of 5 stars">★★★★★</div>
<blockquote class="tm-nsa-q">"SOC 2 compliance, <strong>multi-region failover</strong>, and still deployed faster than our last internal tool. Unreal."</blockquote>
<figcaption class="tm-nsa-author">
<span class="tm-nsa-av" aria-hidden="true">RN</span>
<span><cite class="tm-nsa-an">Rachel Novak</cite><span class="tm-nsa-ar">CTO · Vantage Systems</span></span>
</figcaption>
</article>
<article class="tm-nsa-card tm-nsa-c3">
<span class="tm-nsa-ca-line" aria-hidden="true"></span>
<span class="tm-nsa-gdot" aria-hidden="true"></span>
<div class="tm-nsa-ctag">// growth</div>
<div class="tm-nsa-stars" aria-label="5 out of 5 stars">★★★★★</div>
<blockquote class="tm-nsa-q">"Pipeline visibility went from gut feeling to <strong>real-time precision</strong>. We closed 30% more deals in Q3."</blockquote>
<figcaption class="tm-nsa-author">
<span class="tm-nsa-av" aria-hidden="true">LB</span>
<span><cite class="tm-nsa-an">Luca Bianchi</cite><span class="tm-nsa-ar">VP Sales · Corvis</span></span>
</figcaption>
</article>
</div>
<div class="tm-nsa-grid2">
<article class="tm-nsa-card tm-nsa-c4">
<span class="tm-nsa-ca-line" aria-hidden="true"></span>
<span class="tm-nsa-gdot" aria-hidden="true"></span>
<div class="tm-nsa-ctag">// devex</div>
<div class="tm-nsa-stars" aria-label="5 out of 5 stars">★★★★★</div>
<blockquote class="tm-nsa-q">"Setup took <strong>nine minutes</strong>. Not nine days. Nine minutes."</blockquote>
<figcaption class="tm-nsa-author">
<span class="tm-nsa-av" aria-hidden="true">AO</span>
<span><cite class="tm-nsa-an">Amara Osei</cite><span class="tm-nsa-ar">Senior SRE · Pulsar</span></span>
</figcaption>
</article>
<article class="tm-nsa-card tm-nsa-c5 tm-nsa-wide">
<span class="tm-nsa-ca-line" aria-hidden="true"></span>
<span class="tm-nsa-gdot" aria-hidden="true"></span>
<div class="tm-nsa-ctag">// platform · featured</div>
<div class="tm-nsa-stars" aria-label="5 out of 5 stars">★★★★★</div>
<blockquote class="tm-nsa-q">"I've been in infrastructure for fifteen years. I've watched tools promise to change how teams work and I've watched most fail. This is the first platform where I saw my engineers <strong>actually excited</strong> to open a dashboard. That alone tells you everything."</blockquote>
<figcaption class="tm-nsa-author">
<span class="tm-nsa-av" aria-hidden="true">EM</span>
<span><cite class="tm-nsa-an">Elisa Morrow</cite><span class="tm-nsa-ar">VP Infrastructure · Aether Labs · G2 Verified</span></span>
</figcaption>
</article>
</div>
</section> /* Neon Glass SaaS — dark glassmorphism with ambient orbs. The orbs are
contained inside .tm-nsa via position:absolute + the wrapper's own
overflow:hidden (NOT position:fixed like the original full-page mock).
Cards use backdrop-filter for the frosted-glass effect over the orb
bloom. Four neon accent palettes (cyan/purple/green/orange) cycle
per card via .c1–.c5 modifiers. Pulsing status dots use a gentle
blink animation that respects prefers-reduced-motion. */
.tm-nsa {
--tm-nsa-bg: #07070f;
--tm-nsa-card: rgba(255,255,255,0.04);
--tm-nsa-cbr: rgba(255,255,255,0.08);
--tm-nsa-ch: rgba(255,255,255,0.07);
--tm-nsa-cy: #00e5ff;
--tm-nsa-cp: #b44fff;
--tm-nsa-cg: #00ff9d;
--tm-nsa-co: #ff6b35;
--tm-nsa-text: #f0f0ff;
--tm-nsa-muted: #6b6b8a;
position: relative;
padding: clamp(28px, 4vw, 48px);
background: var(--tm-nsa-bg);
font-family: 'JetBrains Mono', ui-monospace, monospace;
color: var(--tm-nsa-text);
overflow: hidden;
min-height: 520px;
}
.tm-nsa-orb {
position: absolute;
border-radius: 50%;
pointer-events: none;
filter: blur(100px);
opacity: 0.18;
animation: tm-nsa-drift 12s ease-in-out infinite alternate;
}
.tm-nsa-o1 { width: 600px; height: 600px; background: var(--tm-nsa-cp); top: -200px; left: -200px; animation-delay: 0s; }
.tm-nsa-o2 { width: 500px; height: 500px; background: var(--tm-nsa-cy); bottom: -150px; right: -100px; animation-delay: -4s; }
.tm-nsa-o3 { width: 300px; height: 300px; background: var(--tm-nsa-cg); top: 50%; left: 50%; transform: translate(-50%, -50%); animation-delay: -8s; opacity: 0.08; animation-name: tm-nsa-drift2; }
@keyframes tm-nsa-drift {
from { transform: translate(0, 0) scale(1); }
to { transform: translate(30px, 20px) scale(1.1); }
}
@keyframes tm-nsa-drift2 {
from { transform: translate(-50%, -50%) scale(1); }
to { transform: translate(calc(-50% + 20px), calc(-50% + 15px)) scale(1.08); }
}
.tm-nsa-metrics {
position: relative;
z-index: 1;
display: flex;
gap: 1px;
background: var(--tm-nsa-cbr);
border-radius: 16px;
overflow: hidden;
margin-bottom: 18px;
border: 1px solid var(--tm-nsa-cbr);
}
.tm-nsa-metric {
flex: 1;
background: var(--tm-nsa-card);
backdrop-filter: blur(20px);
padding: 16px 20px;
text-align: center;
position: relative;
overflow: hidden;
}
.tm-nsa-metric::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 40%;
height: 2px;
border-radius: 2px 2px 0 0;
transition: width 0.3s;
}
.tm-nsa-metric:hover::after { width: 70%; }
.tm-nsa-metric:nth-child(1)::after { background: var(--tm-nsa-cy); }
.tm-nsa-metric:nth-child(2)::after { background: var(--tm-nsa-cp); }
.tm-nsa-metric:nth-child(3)::after { background: var(--tm-nsa-cg); }
.tm-nsa-metric:nth-child(4)::after { background: var(--tm-nsa-co); }
.tm-nsa-mnum {
font-family: 'Syne', system-ui, sans-serif;
font-size: 1.4rem;
font-weight: 800;
letter-spacing: -0.02em;
}
.tm-nsa-metric:nth-child(1) .tm-nsa-mnum { color: var(--tm-nsa-cy); }
.tm-nsa-metric:nth-child(2) .tm-nsa-mnum { color: var(--tm-nsa-cp); }
.tm-nsa-metric:nth-child(3) .tm-nsa-mnum { color: var(--tm-nsa-cg); }
.tm-nsa-metric:nth-child(4) .tm-nsa-mnum { color: var(--tm-nsa-co); }
.tm-nsa-mlbl {
font-size: 9px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--tm-nsa-muted);
margin-top: 4px;
}
.tm-nsa-grid {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
margin-bottom: 14px;
}
.tm-nsa-grid2 {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1fr 2fr;
gap: 14px;
}
.tm-nsa-card {
background: var(--tm-nsa-card);
border: 1px solid var(--tm-nsa-cbr);
border-radius: 16px;
padding: 24px 22px;
backdrop-filter: blur(20px);
position: relative;
overflow: hidden;
transition: all 0.35s ease;
animation: tm-nsa-su 0.7s cubic-bezier(.22, 1, .36, 1) both;
}
.tm-nsa-card:hover {
background: var(--tm-nsa-ch);
border-color: rgba(255,255,255,0.14);
transform: translateY(-3px);
box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
.tm-nsa-grid .tm-nsa-card:nth-child(1) { animation-delay: 0.05s; }
.tm-nsa-grid .tm-nsa-card:nth-child(2) { animation-delay: 0.12s; }
.tm-nsa-grid .tm-nsa-card:nth-child(3) { animation-delay: 0.19s; }
.tm-nsa-grid2 .tm-nsa-card:nth-child(1) { animation-delay: 0.26s; }
.tm-nsa-grid2 .tm-nsa-card:nth-child(2) { animation-delay: 0.33s; }
@keyframes tm-nsa-su {
from { opacity: 0; transform: translateY(22px); }
to { opacity: 1; transform: translateY(0); }
}
.tm-nsa-ca-line {
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
opacity: 0.7;
transition: opacity 0.35s, height 0.35s;
}
.tm-nsa-card:hover .tm-nsa-ca-line { opacity: 1; height: 2px; }
.tm-nsa-c1 .tm-nsa-ca-line { background: linear-gradient(to right, var(--tm-nsa-cy), transparent); }
.tm-nsa-c2 .tm-nsa-ca-line { background: linear-gradient(to right, var(--tm-nsa-cp), transparent); }
.tm-nsa-c3 .tm-nsa-ca-line { background: linear-gradient(to right, var(--tm-nsa-cg), transparent); }
.tm-nsa-c4 .tm-nsa-ca-line { background: linear-gradient(to right, var(--tm-nsa-co), transparent); }
.tm-nsa-c5 .tm-nsa-ca-line { background: linear-gradient(to right, var(--tm-nsa-cy), var(--tm-nsa-cp)); }
.tm-nsa-gdot {
position: absolute;
top: 18px;
right: 18px;
width: 7px;
height: 7px;
border-radius: 50%;
animation: tm-nsa-blink 3s ease-in-out infinite;
}
.tm-nsa-c1 .tm-nsa-gdot { background: var(--tm-nsa-cy); box-shadow: 0 0 8px var(--tm-nsa-cy); }
.tm-nsa-c2 .tm-nsa-gdot { background: var(--tm-nsa-cp); box-shadow: 0 0 8px var(--tm-nsa-cp); }
.tm-nsa-c3 .tm-nsa-gdot { background: var(--tm-nsa-cg); box-shadow: 0 0 8px var(--tm-nsa-cg); }
.tm-nsa-c4 .tm-nsa-gdot { background: var(--tm-nsa-co); box-shadow: 0 0 8px var(--tm-nsa-co); }
.tm-nsa-c5 .tm-nsa-gdot { background: var(--tm-nsa-cy); box-shadow: 0 0 8px var(--tm-nsa-cy); }
@keyframes tm-nsa-blink {
0%, 100% { opacity: 1; }
50% { opacity: 0.3; }
}
.tm-nsa-stars {
display: flex;
gap: 3px;
margin-bottom: 12px;
font-size: 11px;
letter-spacing: 1px;
}
.tm-nsa-c1 .tm-nsa-stars { color: var(--tm-nsa-cy); }
.tm-nsa-c2 .tm-nsa-stars { color: var(--tm-nsa-cp); }
.tm-nsa-c3 .tm-nsa-stars { color: var(--tm-nsa-cg); }
.tm-nsa-c4 .tm-nsa-stars { color: var(--tm-nsa-co); }
.tm-nsa-c5 .tm-nsa-stars { color: var(--tm-nsa-cy); }
.tm-nsa-q {
font-size: 0.86rem;
line-height: 1.65;
color: rgba(240,240,255,0.78);
margin: 0 0 18px;
font-weight: 300;
font-style: normal;
}
.tm-nsa-q strong { font-weight: 600; color: var(--tm-nsa-text); }
.tm-nsa-author {
display: flex;
align-items: center;
gap: 9px;
padding-top: 14px;
border-top: 1px solid rgba(255,255,255,0.05);
}
.tm-nsa-av {
width: 32px;
height: 32px;
border-radius: 9px;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: 500;
flex-shrink: 0;
}
.tm-nsa-c1 .tm-nsa-av { background: rgba(0,229,255,0.12); color: var(--tm-nsa-cy); border: 1px solid rgba(0,229,255,0.2); }
.tm-nsa-c2 .tm-nsa-av { background: rgba(180,79,255,0.12); color: var(--tm-nsa-cp); border: 1px solid rgba(180,79,255,0.2); }
.tm-nsa-c3 .tm-nsa-av { background: rgba(0,255,157,0.12); color: var(--tm-nsa-cg); border: 1px solid rgba(0,255,157,0.2); }
.tm-nsa-c4 .tm-nsa-av { background: rgba(255,107,53,0.12); color: var(--tm-nsa-co); border: 1px solid rgba(255,107,53,0.2); }
.tm-nsa-c5 .tm-nsa-av { background: rgba(0,229,255,0.12); color: var(--tm-nsa-cy); border: 1px solid rgba(0,229,255,0.2); }
.tm-nsa-an {
font-size: 12px;
font-weight: 600;
font-style: normal;
color: var(--tm-nsa-text);
line-height: 1.3;
display: block;
}
.tm-nsa-ar {
font-size: 9px;
color: var(--tm-nsa-muted);
letter-spacing: 0.05em;
margin-top: 2px;
}
.tm-nsa-ctag {
font-size: 9px;
letter-spacing: 0.08em;
padding: 3px 7px;
border-radius: 4px;
margin-bottom: 10px;
display: inline-block;
}
.tm-nsa-c1 .tm-nsa-ctag { background: rgba(0,229,255,0.1); color: var(--tm-nsa-cy); }
.tm-nsa-c2 .tm-nsa-ctag { background: rgba(180,79,255,0.1); color: var(--tm-nsa-cp); }
.tm-nsa-c3 .tm-nsa-ctag { background: rgba(0,255,157,0.1); color: var(--tm-nsa-cg); }
.tm-nsa-c4 .tm-nsa-ctag { background: rgba(255,107,53,0.1); color: var(--tm-nsa-co); }
.tm-nsa-c5 .tm-nsa-ctag { background: rgba(0,229,255,0.1); color: var(--tm-nsa-cy); }
.tm-nsa-wide .tm-nsa-q { font-size: 1rem; }
@media (max-width: 820px) {
.tm-nsa-grid { grid-template-columns: 1fr; }
.tm-nsa-grid2 { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
.tm-nsa-orb, .tm-nsa-gdot, .tm-nsa-card { animation: none; }
.tm-nsa-card:hover { transform: none; }
}