<div><span class="lbl">Glow-border cards on a near-black page</span>
<section class="dk" aria-labelledby="dk-title">
<div class="dk-head"><p class="dk-kicker">Developers on Relaybase</p><h2 id="dk-title">Shipped on Friday, still up on Monday</h2></div>
<ul class="dk-grid" role="list">
<li><figure class="dk-card">
<span class="dk-tag">Moved off self-hosted queues</span>
<blockquote><p>We deleted four thousand lines of retry logic the week we switched. Webhooks that used to fail silently now show up in one dashboard with the payload attached.</p></blockquote>
<figcaption><span class="dk-av" style="--av:linear-gradient(135deg,#4f46e5,#7c3aed)" aria-hidden="true">LH</span><span><span class="dk-name">Lena Hoffmann</span><span class="dk-role">Staff Engineer, Northlight Maps</span></span></figcaption>
</figure></li>
<li><figure class="dk-card">
<span class="dk-tag">99.99% over twelve months</span>
<blockquote><p>Our on-call rota got boring, and that is the nicest thing I can say about infrastructure. Two pages last quarter, both ours.</p></blockquote>
<figcaption><span class="dk-av" style="--av:linear-gradient(135deg,#0e7490,#1d4ed8)" aria-hidden="true">SA</span><span><span class="dk-name">Samuel Adeyemi</span><span class="dk-role">Head of Platform, Cardinal Pay</span></span></figcaption>
</figure></li>
<li><figure class="dk-card">
<span class="dk-tag">From prototype to launch</span>
<blockquote><p>The local emulator matches production closely enough that our first deploy was a non-event. We launched to forty thousand users on a Thursday.</p></blockquote>
<figcaption><span class="dk-av" style="--av:linear-gradient(135deg,#be185d,#7c3aed)" aria-hidden="true">MC</span><span><span class="dk-name">Mei Lin Chua</span><span class="dk-role">CTO, Fieldwork Health</span></span></figcaption>
</figure></li>
</ul>
</section></div>
<div><span class="lbl">Spotlight quote with text wordmarks</span>
<section class="dk dk-spot" aria-label="Featured customer quote">
<figure>
<blockquote><p>We evaluated five platforms with a real production load. Relaybase was the only one where <mark>the bill and the latency both went down</mark> when traffic went up.</p></blockquote>
<figcaption><span class="dk-av" style="--av:linear-gradient(135deg,#0e7490,#4f46e5)" aria-hidden="true">RV</span><span><span class="dk-name">Rohan Verma</span><span class="dk-role">VP Engineering, Halcyon Travel</span></span></figcaption>
</figure>
<p class="dk-logos-lbl">Trusted by engineering teams at</p>
<ul class="dk-logos" role="list">
<li class="nl">Northlight</li>
<li class="cp">cardinal/pay</li>
<li class="fw">FIELDWORK</li>
<li class="on">Orbital Nine</li>
<li class="hc">halcyon</li>
</ul>
</section></div>
CSS
/* Dark testimonials for a near-black page. Text colours are checked for 4.5:1 on the card surface,
and the glowing border is a two-layer background (padding-box fill over a border-box gradient). */
.dk{--dk-bg:#0b0f17;--dk-card:#111827;--dk-ink:#f3f4f6;--dk-muted:#9ca3af;--dk-accent:#a5b4fc}
.dk-head{max-width:620px;margin:0 auto 40px;text-align:center}
.dk-kicker{font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--dk-accent)}
.dk-head h2{margin-top:8px;font-size:clamp(1.6rem,1.2rem + 1.6vw,2.3rem);font-weight:800;line-height:1.12;letter-spacing:-.025em;color:var(--dk-ink);text-wrap:balance}
.dk-grid{display:grid;gap:20px;margin:0;padding:0;list-style:none}
@media (min-width:768px){.dk-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:992px){.dk-grid{grid-template-columns:repeat(3,1fr)}}
.dk-grid>li{display:flex}
.dk-card{flex:1;display:flex;flex-direction:column;gap:18px;margin:0;padding:26px;border:1px solid transparent;border-radius:20px;
background:linear-gradient(var(--dk-card),var(--dk-card)) padding-box,linear-gradient(145deg,rgba(129,140,248,.7),rgba(34,211,238,.15) 45%,rgba(255,255,255,.08)) border-box;
box-shadow:0 20px 50px -30px rgba(99,102,241,.55)}
.dk-tag{align-self:flex-start;padding:3px 10px;border:1px solid rgba(165,180,252,.3);border-radius:999px;
font:600 .75rem/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#c7d2fe}
.dk-card blockquote{flex:1;margin:0;line-height:1.65;color:#e5e7eb}
.dk-card figcaption{display:flex;align-items:center;gap:12px;padding-top:18px;border-top:1px solid rgba(255,255,255,.08)}
.dk-av{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--av);color:#fff;font-size:.85rem;font-weight:700}
.dk-name{display:block;font-weight:700;color:var(--dk-ink)}
.dk-role{display:block;font-size:.875rem;color:var(--dk-muted)}
/* Spotlight quote with a row of text wordmarks */
.dk-spot{padding:clamp(40px,6vw,72px) clamp(20px,5vw,56px) 36px;border:1px solid #1f2937;border-radius:28px;text-align:center;
background:radial-gradient(60% 70% at 50% 0%,rgba(99,102,241,.28),transparent 70%),var(--dk-bg)}
.dk-spot figure{max-width:760px;margin:0 auto}
.dk-spot blockquote{margin:0;font-size:clamp(1.35rem,1rem + 1.6vw,2rem);font-weight:600;line-height:1.35;letter-spacing:-.015em;color:var(--dk-ink);text-wrap:balance}
.dk-spot blockquote mark{background:none;color:transparent;background-image:linear-gradient(90deg,#a5b4fc,#67e8f9);-webkit-background-clip:text;background-clip:text}
.dk-spot figcaption{display:inline-flex;align-items:center;gap:12px;margin-top:28px;text-align:left}
.dk-spot .dk-av{width:48px;height:48px;box-shadow:0 0 0 3px var(--dk-bg),0 0 0 5px rgba(165,180,252,.5)}
.dk-logos{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px 36px;margin:44px 0 0;padding:28px 0 0;list-style:none;border-top:1px solid #1f2937}
.dk-logos li{font-size:1.15rem;color:#9ca3af}
.dk-logos .nl{font-weight:800;letter-spacing:-.04em}
.dk-logos .cp{font-weight:500;letter-spacing:-.02em}
.dk-logos .fw{font-size:.95rem;font-weight:800;letter-spacing:.24em}
.dk-logos .on{font:italic 700 1.15rem Georgia,"Times New Roman",serif}
.dk-logos .hc{font-weight:300;letter-spacing:.06em}
.dk-logos-lbl{margin-top:44px;font-size:.8rem;color:var(--dk-muted)}
.dk-logos-lbl+.dk-logos{margin-top:16px;padding-top:0;border:0}
Bootstrap 5 code
Requires: Bootstrap 5.3.8 CSS
HTML
<div><span class="lbl">Glow-border cards on a near-black page</span>
<section class="dk" aria-labelledby="dk-title">
<div class="dk-head text-center"><p class="dk-kicker mb-0">Developers on Relaybase</p><h2 id="dk-title">Shipped on Friday, still up on Monday</h2></div>
<ul class="row row-cols-1 row-cols-md-2 row-cols-lg-3 dk-grid list-unstyled mb-0" role="list">
<li class="col"><figure class="card dk-card h-100 mb-0"><div class="card-body d-flex flex-column">
<span class="badge rounded-pill dk-tag align-self-start">Moved off self-hosted queues</span>
<blockquote class="flex-grow-1 mb-0"><p class="mb-0">We deleted four thousand lines of retry logic the week we switched. Webhooks that used to fail silently now show up in one dashboard with the payload attached.</p></blockquote>
<figcaption class="d-flex align-items-center"><span class="dk-av" style="--av:linear-gradient(135deg,#4f46e5,#7c3aed)" aria-hidden="true">LH</span><span><span class="d-block fw-bold">Lena Hoffmann</span><span class="d-block dk-role">Staff Engineer, Northlight Maps</span></span></figcaption>
</div></figure></li>
<li class="col"><figure class="card dk-card h-100 mb-0"><div class="card-body d-flex flex-column">
<span class="badge rounded-pill dk-tag align-self-start">99.99% over twelve months</span>
<blockquote class="flex-grow-1 mb-0"><p class="mb-0">Our on-call rota got boring, and that is the nicest thing I can say about infrastructure. Two pages last quarter, both ours.</p></blockquote>
<figcaption class="d-flex align-items-center"><span class="dk-av" style="--av:linear-gradient(135deg,#0e7490,#1d4ed8)" aria-hidden="true">SA</span><span><span class="d-block fw-bold">Samuel Adeyemi</span><span class="d-block dk-role">Head of Platform, Cardinal Pay</span></span></figcaption>
</div></figure></li>
<li class="col"><figure class="card dk-card h-100 mb-0"><div class="card-body d-flex flex-column">
<span class="badge rounded-pill dk-tag align-self-start">From prototype to launch</span>
<blockquote class="flex-grow-1 mb-0"><p class="mb-0">The local emulator matches production closely enough that our first deploy was a non-event. We launched to forty thousand users on a Thursday.</p></blockquote>
<figcaption class="d-flex align-items-center"><span class="dk-av" style="--av:linear-gradient(135deg,#be185d,#7c3aed)" aria-hidden="true">MC</span><span><span class="d-block fw-bold">Mei Lin Chua</span><span class="d-block dk-role">CTO, Fieldwork Health</span></span></figcaption>
</div></figure></li>
</ul>
</section></div>
<div><span class="lbl">Spotlight quote with text wordmarks</span>
<section class="dk dk-spot text-center" aria-label="Featured customer quote">
<figure class="mx-auto mb-0">
<blockquote class="mb-0"><p class="mb-0">We evaluated five platforms with a real production load. Relaybase was the only one where <mark>the bill and the latency both went down</mark> when traffic went up.</p></blockquote>
<figcaption class="d-inline-flex align-items-center text-start"><span class="dk-av" style="--av:linear-gradient(135deg,#0e7490,#4f46e5)" aria-hidden="true">RV</span><span><span class="d-block fw-bold">Rohan Verma</span><span class="d-block dk-role">VP Engineering, Halcyon Travel</span></span></figcaption>
</figure>
<p class="dk-logos-lbl mb-0">Trusted by engineering teams at</p>
<ul class="dk-logos list-unstyled d-flex flex-wrap justify-content-center align-items-center mb-0" role="list">
<li class="nl">Northlight</li>
<li class="cp">cardinal/pay</li>
<li class="fw">FIELDWORK</li>
<li class="on">Orbital Nine</li>
<li class="hc">halcyon</li>
</ul>
</section></div>
<div><span class="mb-[18px] block text-[.72rem] tracking-[.12em] text-[#9ca3af] uppercase">Glow-border cards on a near-black page</span>
<section aria-labelledby="dk-title">
<div class="mx-auto mb-10 max-w-[620px] text-center"><p class="text-[.8rem] font-bold tracking-[.12em] text-[#a5b4fc] uppercase">Developers on Relaybase</p><h2 id="dk-title" class="mt-2 text-[clamp(1.6rem,1.2rem+1.6vw,2.3rem)] leading-[1.12] font-extrabold tracking-[-.025em] text-balance text-[#f3f4f6]">Shipped on Friday, still up on Monday</h2></div>
<ul class="grid gap-5 md:grid-cols-2 lg:grid-cols-3" role="list">
<li class="flex"><figure class="flex flex-1 flex-col gap-[18px] rounded-[20px] border border-transparent p-[26px] [background:linear-gradient(#111827,#111827)_padding-box,linear-gradient(145deg,rgba(129,140,248,.7),rgba(34,211,238,.15)_45%,rgba(255,255,255,.08))_border-box] shadow-[0_20px_50px_-30px_rgba(99,102,241,.55)]">
<span class="self-start rounded-full border border-[rgba(165,180,252,.3)] px-2.5 py-[3px] font-mono text-[.75rem] leading-normal font-semibold text-[#c7d2fe]">Moved off self-hosted queues</span>
<blockquote class="flex-1 leading-[1.65] text-[#e5e7eb]"><p>We deleted four thousand lines of retry logic the week we switched. Webhooks that used to fail silently now show up in one dashboard with the payload attached.</p></blockquote>
<figcaption class="flex items-center gap-3 border-t border-white/8 pt-[18px]"><span class="grid size-[42px] flex-none place-items-center rounded-full bg-[linear-gradient(135deg,#4f46e5,#7c3aed)] text-[.85rem] font-bold text-white" aria-hidden="true">LH</span><span><span class="block font-bold text-[#f3f4f6]">Lena Hoffmann</span><span class="block text-[.875rem] text-[#9ca3af]">Staff Engineer, Northlight Maps</span></span></figcaption>
</figure></li>
<li class="flex"><figure class="flex flex-1 flex-col gap-[18px] rounded-[20px] border border-transparent p-[26px] [background:linear-gradient(#111827,#111827)_padding-box,linear-gradient(145deg,rgba(129,140,248,.7),rgba(34,211,238,.15)_45%,rgba(255,255,255,.08))_border-box] shadow-[0_20px_50px_-30px_rgba(99,102,241,.55)]">
<span class="self-start rounded-full border border-[rgba(165,180,252,.3)] px-2.5 py-[3px] font-mono text-[.75rem] leading-normal font-semibold text-[#c7d2fe]">99.99% over twelve months</span>
<blockquote class="flex-1 leading-[1.65] text-[#e5e7eb]"><p>Our on-call rota got boring, and that is the nicest thing I can say about infrastructure. Two pages last quarter, both ours.</p></blockquote>
<figcaption class="flex items-center gap-3 border-t border-white/8 pt-[18px]"><span class="grid size-[42px] flex-none place-items-center rounded-full bg-[linear-gradient(135deg,#0e7490,#1d4ed8)] text-[.85rem] font-bold text-white" aria-hidden="true">SA</span><span><span class="block font-bold text-[#f3f4f6]">Samuel Adeyemi</span><span class="block text-[.875rem] text-[#9ca3af]">Head of Platform, Cardinal Pay</span></span></figcaption>
</figure></li>
<li class="flex"><figure class="flex flex-1 flex-col gap-[18px] rounded-[20px] border border-transparent p-[26px] [background:linear-gradient(#111827,#111827)_padding-box,linear-gradient(145deg,rgba(129,140,248,.7),rgba(34,211,238,.15)_45%,rgba(255,255,255,.08))_border-box] shadow-[0_20px_50px_-30px_rgba(99,102,241,.55)]">
<span class="self-start rounded-full border border-[rgba(165,180,252,.3)] px-2.5 py-[3px] font-mono text-[.75rem] leading-normal font-semibold text-[#c7d2fe]">From prototype to launch</span>
<blockquote class="flex-1 leading-[1.65] text-[#e5e7eb]"><p>The local emulator matches production closely enough that our first deploy was a non-event. We launched to forty thousand users on a Thursday.</p></blockquote>
<figcaption class="flex items-center gap-3 border-t border-white/8 pt-[18px]"><span class="grid size-[42px] flex-none place-items-center rounded-full bg-[linear-gradient(135deg,#be185d,#7c3aed)] text-[.85rem] font-bold text-white" aria-hidden="true">MC</span><span><span class="block font-bold text-[#f3f4f6]">Mei Lin Chua</span><span class="block text-[.875rem] text-[#9ca3af]">CTO, Fieldwork Health</span></span></figcaption>
</figure></li>
</ul>
</section></div>
<div><span class="mb-[18px] block text-[.72rem] tracking-[.12em] text-[#9ca3af] uppercase">Spotlight quote with text wordmarks</span>
<section class="rounded-[28px] border border-[#1f2937] bg-[radial-gradient(60%_70%_at_50%_0%,rgba(99,102,241,.28),transparent_70%),linear-gradient(#0b0f17,#0b0f17)] px-[clamp(20px,5vw,56px)] pt-[clamp(40px,6vw,72px)] pb-9 text-center" aria-label="Featured customer quote">
<figure class="mx-auto max-w-[760px]">
<blockquote class="text-[clamp(1.35rem,1rem+1.6vw,2rem)] leading-[1.35] font-semibold tracking-[-.015em] text-balance text-[#f3f4f6]"><p>We evaluated five platforms with a real production load. Relaybase was the only one where <mark class="bg-linear-90 from-[#a5b4fc] to-[#67e8f9] bg-clip-text text-transparent">the bill and the latency both went down</mark> when traffic went up.</p></blockquote>
<figcaption class="mt-7 inline-flex items-center gap-3 text-left"><span class="grid size-12 flex-none place-items-center rounded-full bg-[linear-gradient(135deg,#0e7490,#4f46e5)] text-[.85rem] font-bold text-white shadow-[0_0_0_3px_#0b0f17,0_0_0_5px_rgba(165,180,252,.5)]" aria-hidden="true">RV</span><span><span class="block font-bold text-[#f3f4f6]">Rohan Verma</span><span class="block text-[.875rem] text-[#9ca3af]">VP Engineering, Halcyon Travel</span></span></figcaption>
</figure>
<p class="mt-11 text-[.8rem] text-[#9ca3af]">Trusted by engineering teams at</p>
<ul class="mt-4 flex flex-wrap items-center justify-center gap-x-9 gap-y-3.5" role="list">
<li class="text-[1.15rem] text-[#9ca3af] font-extrabold tracking-[-.04em]">Northlight</li>
<li class="text-[1.15rem] text-[#9ca3af] font-medium tracking-[-.02em]">cardinal/pay</li>
<li class="text-[1.15rem] text-[#9ca3af] text-[.95rem] font-extrabold tracking-[.24em]">FIELDWORK</li>
<li class="text-[1.15rem] text-[#9ca3af] font-[Georgia,'Times_New_Roman',serif] italic font-bold">Orbital Nine</li>
<li class="text-[1.15rem] text-[#9ca3af] font-light tracking-[.06em]">halcyon</li>
</ul>
</section></div>
About this set
Testimonials for a dark developer tool or SaaS site, where a light card on a black page looks out of place. The glow-border cards set three quotes on a near-black page in cards whose one-pixel border fades from indigo to cyan, each with a monospaced tag such as 99.99% over twelve months, the quote, and a gradient initials avatar with name and role. The spotlight quote sets one large quote under a soft indigo glow, with the key phrase in gradient text, and a row of customer names below written as text wordmarks in five different type styles. The gradient border is two backgrounds on one element, a padding-box fill over a border-box gradient, so it needs no extra wrapper or pseudo-element. Greys were picked for contrast on the card surface rather than taken from a light theme, and the Bootstrap version runs in data-bs-theme dark.
What’s included
Glow-border cards and a spotlight quote
Gradient border from two background layers, no wrapper
Gradient text on the key phrase of the quote
Trusted-by row of text wordmarks, no logo files
Bootstrap version in data-bs-theme="dark"
Accessibility
Body text, roles and wordmarks are checked against 4.5:1 on the near-black surfaces. Quotes use figure, blockquote and figcaption, the cards sit in a list, and avatars are aria-hidden. The highlighted phrase is a mark element, so it stays in the quote text for screen readers.
Customise it
Change --dk-bg, --dk-card, --dk-ink, --dk-muted and --dk-accent on .dk, and the two gradients in the .dk-card background for the border. Bootstrap uses the same variables on .card; in Tailwind edit the hex values in the [background:...] and text- utilities.
