Crypto Aurora
Deep-space aurora mesh background with animated gradient bands, hexagon clip-path avatars, holographic shimmer card borders on hover, volume bars, on-chain wallet hashes, and neon-per-chain color accents. Use case: DeFi / Web3 protocol. Oxanium for headings, Space Mono for hash addresses.
Crypto Aurora the 7th 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-cau" aria-label="On-chain reviews">
<span class="tm-cau-aurora" aria-hidden="true">
<span class="tm-cau-band tm-cau-ab1"></span>
<span class="tm-cau-band tm-cau-ab2"></span>
<span class="tm-cau-band tm-cau-ab3"></span>
<span class="tm-cau-band tm-cau-ab4"></span>
</span>
<header class="tm-cau-header">
<div class="tm-cau-logo-text">ChainVerify · On-Chain Reviews</div>
<div class="tm-cau-header-stat">
<div class="tm-cau-hstat-num">$2.4B</div>
<div class="tm-cau-hstat-lbl">volume protected · 48,220 reviews</div>
</div>
</header>
<div class="tm-cau-grid">
<article class="tm-cau-card tm-cau-c1 tm-cau-feat">
<span class="tm-cau-al" aria-hidden="true"></span>
<span class="tm-cau-qm" aria-hidden="true">“</span>
<div class="tm-cau-token">◆ DeFi · Verified Trader</div>
<div class="tm-cau-vol-bar" aria-hidden="true">
<span class="tm-cau-vb" style="height:8px"></span>
<span class="tm-cau-vb" style="height:14px"></span>
<span class="tm-cau-vb" style="height:10px"></span>
<span class="tm-cau-vb" style="height:18px"></span>
<span class="tm-cau-vb" style="height:12px"></span>
<span class="tm-cau-vb" style="height:20px"></span>
<span class="tm-cau-vb" style="height:8px"></span>
</div>
<div class="tm-cau-stars" aria-label="5 out of 5 stars">★★★★★</div>
<blockquote class="tm-cau-q">I've used six DeFi protocols in three years. The <b>gas optimization alone</b> paid for itself in a single month of active trading. No rug, no drama — just protocol doing exactly what it promised, on-chain, auditable, forever. That kind of integrity is rare in this space.</blockquote>
<figcaption class="tm-cau-author">
<span class="tm-cau-av" aria-hidden="true">0x</span>
<span><cite class="tm-cau-an">0xVelvet.eth</cite><span class="tm-cau-ar">DeFi power user · 3y holder</span></span>
</figcaption>
<span class="tm-cau-wallet" aria-hidden="true">0x7f4a...c3b2</span>
</article>
<article class="tm-cau-card tm-cau-c2">
<span class="tm-cau-al" aria-hidden="true"></span>
<div class="tm-cau-token">◆ NFT · Verified Collector</div>
<div class="tm-cau-stars" aria-label="5 out of 5 stars">★★★★★</div>
<blockquote class="tm-cau-q">Minted on day one. Floor is <b>14× entry</b>. The roadmap delivered every milestone. This is what web3 was supposed to feel like.</blockquote>
<figcaption class="tm-cau-author">
<span class="tm-cau-av" aria-hidden="true">NK</span>
<span><cite class="tm-cau-an">NeonKoi.eth</cite><span class="tm-cau-ar">NFT collector · Top 0.1%</span></span>
</figcaption>
<span class="tm-cau-wallet" aria-hidden="true">0x2a9f...81de</span>
</article>
<article class="tm-cau-card tm-cau-c3">
<span class="tm-cau-al" aria-hidden="true"></span>
<div class="tm-cau-token">◆ DAO · Core Contributor</div>
<div class="tm-cau-stars" aria-label="5 out of 5 stars">★★★★★</div>
<blockquote class="tm-cau-q">Governance is <b>actually governable</b>. Voted on 40+ proposals. My voice moved the protocol. That's not something I can say about many DAOs.</blockquote>
<figcaption class="tm-cau-author">
<span class="tm-cau-av" aria-hidden="true">PR</span>
<span><cite class="tm-cau-an">ProtocolRaven</cite><span class="tm-cau-ar">DAO core contributor</span></span>
</figcaption>
<span class="tm-cau-wallet" aria-hidden="true">0xb3d1...59ac</span>
</article>
<article class="tm-cau-card tm-cau-c4">
<span class="tm-cau-al" aria-hidden="true"></span>
<div class="tm-cau-token">◆ Yield · Verified</div>
<div class="tm-cau-stars" aria-label="5 out of 5 stars">★★★★★</div>
<blockquote class="tm-cau-q"><b>38% APY</b>, zero impermanent loss surprises. The risk dashboard is the most honest I've seen in DeFi. Period.</blockquote>
<figcaption class="tm-cau-author">
<span class="tm-cau-av" aria-hidden="true">AL</span>
<span><cite class="tm-cau-an">AlphaSatoshi</cite><span class="tm-cau-ar">Yield farmer · 2y</span></span>
</figcaption>
<span class="tm-cau-wallet" aria-hidden="true">0x4e8c...f12a</span>
</article>
<article class="tm-cau-card tm-cau-c5">
<span class="tm-cau-al" aria-hidden="true"></span>
<div class="tm-cau-token">◆ Bridge · Verified</div>
<div class="tm-cau-stars" aria-label="5 out of 5 stars">★★★★★</div>
<blockquote class="tm-cau-q">Bridged <b>$400K across chains</b> last quarter. Zero failed transactions. Settlement was faster than CEX withdrawals. Genuinely shocked.</blockquote>
<figcaption class="tm-cau-author">
<span class="tm-cau-av" aria-hidden="true">WX</span>
<span><cite class="tm-cau-an">WhalexBTC</cite><span class="tm-cau-ar">Multi-chain trader</span></span>
</figcaption>
<span class="tm-cau-wallet" aria-hidden="true">0x9c2b...7e34</span>
</article>
</div>
</section> /* Crypto Aurora — animated aurora mesh background. The aurora layer
is contained inside .tm-cau via overflow:hidden + position:absolute
(not viewport-fixed). Holographic shimmer borders fire on card hover
via a gradient inset + mask trick. Hexagon avatars use clip-path. */
.tm-cau {
--tm-cau-bg: #04040f;
--tm-cau-s1: #7b2fff;
--tm-cau-s2: #00d4ff;
--tm-cau-s3: #ff2d9b;
--tm-cau-s4: #39ff7a;
--tm-cau-card: rgba(255,255,255,0.035);
--tm-cau-border: rgba(255,255,255,0.07);
--tm-cau-text: #e8e8ff;
--tm-cau-muted: #6060a0;
position: relative;
padding: clamp(28px, 4vw, 48px);
background: var(--tm-cau-bg);
font-family: 'Oxanium', system-ui, sans-serif;
color: var(--tm-cau-text);
overflow: hidden;
min-height: 520px;
}
.tm-cau-aurora {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
pointer-events: none;
}
.tm-cau-band {
position: absolute;
border-radius: 50%;
filter: blur(80px);
animation: tm-cau-float 10s ease-in-out infinite alternate;
}
.tm-cau-ab1 { width: 700px; height: 350px; background: linear-gradient(135deg, var(--tm-cau-s1), transparent); top: -100px; left: -100px; opacity: 0.25; animation-delay: 0s; }
.tm-cau-ab2 { width: 600px; height: 300px; background: linear-gradient(45deg, var(--tm-cau-s2), transparent); top: 100px; right: -150px; opacity: 0.2; animation-delay: -3s; }
.tm-cau-ab3 { width: 500px; height: 250px; background: linear-gradient(225deg, var(--tm-cau-s3), transparent); bottom: -80px; left: 200px; opacity: 0.18; animation-delay: -6s; }
.tm-cau-ab4 { width: 400px; height: 200px; background: linear-gradient(315deg, var(--tm-cau-s4), transparent); bottom: 50px; right: 100px; opacity: 0.14; animation-delay: -9s; }
@keyframes tm-cau-float {
from { transform: translate(0,0) scale(1) rotate(0deg); }
to { transform: translate(30px,20px) scale(1.12) rotate(8deg); }
}
.tm-cau-header {
position: relative;
z-index: 1;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 32px;
}
.tm-cau-logo-text {
font-size: 11px;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--tm-cau-s2);
}
.tm-cau-header-stat { text-align: right; }
.tm-cau-hstat-num {
font-size: 1.5rem;
font-weight: 800;
background: linear-gradient(135deg, var(--tm-cau-s1), var(--tm-cau-s2));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
line-height: 1;
}
.tm-cau-hstat-lbl {
font-family: 'Space Mono', ui-monospace, monospace;
font-size: 9px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--tm-cau-muted);
margin-top: 3px;
}
.tm-cau-grid {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1.6fr 1fr 1fr;
grid-template-rows: auto auto;
gap: 2px;
}
.tm-cau-card {
background: var(--tm-cau-card);
border: 1px solid var(--tm-cau-border);
backdrop-filter: blur(24px);
padding: 24px 22px;
position: relative;
overflow: hidden;
transition: all 0.4s ease;
animation: tm-cau-in 0.7s cubic-bezier(.22, 1, .36, 1) both;
display: flex;
flex-direction: column;
}
.tm-cau-card:hover {
background: rgba(255,255,255,0.06);
border-color: rgba(255,255,255,0.14);
transform: translateY(-2px);
}
.tm-cau-card:nth-child(1) { animation-delay: 0.05s; }
.tm-cau-card:nth-child(2) { animation-delay: 0.12s; }
.tm-cau-card:nth-child(3) { animation-delay: 0.19s; }
.tm-cau-card:nth-child(4) { animation-delay: 0.26s; }
.tm-cau-card:nth-child(5) { animation-delay: 0.33s; }
@keyframes tm-cau-in {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.tm-cau-card::before {
content: '';
position: absolute;
inset: -1px;
border-radius: inherit;
background: linear-gradient(135deg, var(--tm-cau-s1), var(--tm-cau-s2), var(--tm-cau-s3), var(--tm-cau-s4));
opacity: 0;
transition: opacity 0.4s;
z-index: -1;
}
.tm-cau-card:hover::before { opacity: 0.5; }
.tm-cau-card::after {
content: '';
position: absolute;
inset: 0;
background: var(--tm-cau-bg);
opacity: 0.97;
z-index: -1;
transition: opacity 0.4s;
}
.tm-cau-card:hover::after { opacity: 0.94; }
.tm-cau-feat {
grid-row: 1 / 3;
}
.tm-cau-al {
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
}
.tm-cau-c1 .tm-cau-al { background: linear-gradient(to right, var(--tm-cau-s1), var(--tm-cau-s2)); }
.tm-cau-c2 .tm-cau-al { background: linear-gradient(to right, var(--tm-cau-s2), var(--tm-cau-s4)); }
.tm-cau-c3 .tm-cau-al { background: linear-gradient(to right, var(--tm-cau-s3), var(--tm-cau-s1)); }
.tm-cau-c4 .tm-cau-al { background: linear-gradient(to right, var(--tm-cau-s4), var(--tm-cau-s2)); }
.tm-cau-c5 .tm-cau-al { background: linear-gradient(to right, var(--tm-cau-s1), var(--tm-cau-s3)); }
.tm-cau-qm {
font-size: 5rem;
line-height: 0.8;
font-weight: 800;
opacity: 0.07;
position: absolute;
top: 16px;
left: 20px;
pointer-events: none;
font-family: 'Oxanium', serif;
}
.tm-cau-c1 .tm-cau-qm { color: var(--tm-cau-s1); }
.tm-cau-token {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: 'Space Mono', ui-monospace, monospace;
font-size: 9px;
letter-spacing: 0.15em;
text-transform: uppercase;
padding: 4px 10px;
border-radius: 2px;
margin-bottom: 14px;
width: fit-content;
}
.tm-cau-c1 .tm-cau-token { background: rgba(123,47,255,0.15); color: var(--tm-cau-s1); border: 1px solid rgba(123,47,255,0.3); }
.tm-cau-c2 .tm-cau-token { background: rgba(0,212,255,0.12); color: var(--tm-cau-s2); border: 1px solid rgba(0,212,255,0.25); }
.tm-cau-c3 .tm-cau-token { background: rgba(255,45,155,0.12); color: var(--tm-cau-s3); border: 1px solid rgba(255,45,155,0.25); }
.tm-cau-c4 .tm-cau-token { background: rgba(57,255,122,0.12); color: var(--tm-cau-s4); border: 1px solid rgba(57,255,122,0.25); }
.tm-cau-c5 .tm-cau-token { background: rgba(123,47,255,0.15); color: var(--tm-cau-s1); border: 1px solid rgba(123,47,255,0.3); }
.tm-cau-vol-bar {
display: flex;
align-items: flex-end;
gap: 2px;
height: 22px;
margin-bottom: 12px;
}
.tm-cau-vb {
width: 4px;
background: currentColor;
border-radius: 2px 2px 0 0;
animation: tm-cau-vbanim 1.2s ease-in-out infinite alternate;
}
.tm-cau-c1 .tm-cau-vol-bar { color: rgba(123,47,255,0.6); }
.tm-cau-vb:nth-child(1) { animation-delay: 0s; }
.tm-cau-vb:nth-child(2) { animation-delay: 0.15s; }
.tm-cau-vb:nth-child(3) { animation-delay: 0.3s; }
.tm-cau-vb:nth-child(4) { animation-delay: 0.45s; }
.tm-cau-vb:nth-child(5) { animation-delay: 0.6s; }
.tm-cau-vb:nth-child(6) { animation-delay: 0.75s; }
.tm-cau-vb:nth-child(7) { animation-delay: 0.9s; }
@keyframes tm-cau-vbanim {
from { opacity: 0.4; }
to { opacity: 1; }
}
.tm-cau-stars {
display: flex;
gap: 3px;
margin-bottom: 14px;
font-size: 12px;
}
.tm-cau-c1 .tm-cau-stars, .tm-cau-c5 .tm-cau-stars { color: var(--tm-cau-s1); }
.tm-cau-c2 .tm-cau-stars { color: var(--tm-cau-s2); }
.tm-cau-c3 .tm-cau-stars { color: var(--tm-cau-s3); }
.tm-cau-c4 .tm-cau-stars { color: var(--tm-cau-s4); }
.tm-cau-q {
font-size: 0.88rem;
line-height: 1.65;
color: rgba(232,232,255,0.78);
font-weight: 300;
margin: 0 0 20px;
font-style: normal;
flex: 1;
}
.tm-cau-q b { font-weight: 700; color: var(--tm-cau-text); }
.tm-cau-feat .tm-cau-q { font-size: 1.05rem; }
.tm-cau-author {
display: flex;
align-items: center;
gap: 10px;
border-top: 1px solid rgba(255,255,255,0.05);
padding-top: 14px;
margin-top: auto;
}
.tm-cau-av {
width: 34px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: 700;
font-family: 'Space Mono', ui-monospace, monospace;
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
flex-shrink: 0;
}
.tm-cau-c1 .tm-cau-av, .tm-cau-c5 .tm-cau-av { background: linear-gradient(135deg, var(--tm-cau-s1), rgba(123,47,255,0.5)); color: #fff; }
.tm-cau-c2 .tm-cau-av { background: linear-gradient(135deg, var(--tm-cau-s2), rgba(0,212,255,0.5)); color: #000; }
.tm-cau-c3 .tm-cau-av { background: linear-gradient(135deg, var(--tm-cau-s3), rgba(255,45,155,0.5)); color: #fff; }
.tm-cau-c4 .tm-cau-av { background: linear-gradient(135deg, var(--tm-cau-s4), rgba(57,255,122,0.5)); color: #000; }
.tm-cau-an {
font-size: 12px;
font-weight: 600;
font-style: normal;
color: var(--tm-cau-text);
line-height: 1.3;
display: block;
}
.tm-cau-ar {
font-family: 'Space Mono', ui-monospace, monospace;
font-size: 9px;
color: var(--tm-cau-muted);
margin-top: 2px;
letter-spacing: 0.05em;
}
.tm-cau-wallet {
font-family: 'Space Mono', ui-monospace, monospace;
font-size: 8px;
color: rgba(255,255,255,0.2);
position: absolute;
bottom: 10px;
right: 12px;
letter-spacing: 0.05em;
}
@media (max-width: 820px) {
.tm-cau-grid { grid-template-columns: 1fr; }
.tm-cau-feat { grid-row: auto; }
}
@media (prefers-reduced-motion: reduce) {
.tm-cau-band, .tm-cau-vb, .tm-cau-card { animation: none; }
.tm-cau-card:hover { transform: none; }
}