Aurora Drift
Slow-drifting aurora gradient blob behind a glass quote surface — the premium-product accent variant. Honours prefers-reduced-motion.
Aurora Drift the 12th of 19 designs in the 19 CSS Blockquote Designs 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
<figure class="cbq-aurora">
<span class="cbq-aurora-blob" aria-hidden="true"></span>
<div class="cbq-aurora-card">
<blockquote><p>"Beauty in software is honesty rendered visible."</p></blockquote>
<figcaption>— Lin Wei</figcaption>
</div>
</figure> .cbq-aurora {
position: relative;
max-width: 340px;
padding: 28px;
border-radius: 18px;
background: #0d0d16;
overflow: hidden;
isolation: isolate;
font-family: system-ui, sans-serif;
}
.cbq-aurora-blob {
position: absolute;
inset: -40%;
background:
radial-gradient(40% 40% at 30% 30%, rgba(124, 108, 255, 0.55), transparent 70%),
radial-gradient(40% 40% at 70% 60%, rgba(255, 108, 138, 0.45), transparent 70%),
radial-gradient(35% 35% at 50% 80%, rgba(46, 184, 138, 0.4), transparent 70%);
filter: blur(8px);
animation: cbq-aurora-drift 14s linear infinite;
z-index: 0;
}
.cbq-aurora-card {
position: relative;
z-index: 1;
padding: 18px;
border-radius: 14px;
background: rgba(13, 13, 22, 0.55);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.1);
color: #f0eeff;
}
.cbq-aurora blockquote {
margin: 0;
}
.cbq-aurora p {
margin: 0;
font-size: 14.5px;
line-height: 1.55;
font-weight: 500;
}
.cbq-aurora figcaption {
margin-top: 12px;
font-size: 11px;
color: rgba(240, 238, 255, 0.7);
}
@media (prefers-reduced-motion: reduce) {
.cbq-aurora-blob {
animation: none !important;
}
}
@keyframes cbq-aurora-drift {
0% {
transform: translate(0, 0) rotate(0deg);
}
50% {
transform: translate(4%, -4%) rotate(180deg);
}
100% {
transform: translate(0, 0) rotate(360deg);
}
}