Aurora Status
Status pill that breathes. Four pools of color drift behind a frosted lens; their hues rotate continuously through the spectrum. For loading, streaming, thinking — when text alone is not enough.
Aurora Status the 21st of 30 designs in the 30 CSS Badges 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
<div class="aur-stage">
<div class="aur-stars"></div>
<div class="aur-badge">
<div class="aur-bg"></div>
<span class="aur-spinner">
<svg viewBox="0 0 24 24" aria-hidden="true">
<circle cx="12" cy="12" r="9" fill="none" stroke="rgba(255,255,255,0.2)" stroke-width="2"/>
<circle cx="12" cy="12" r="9" fill="none" stroke="white" stroke-width="2" stroke-dasharray="14 42" stroke-linecap="round"/>
</svg>
</span>
<div class="aur-text">
<div class="aur-label">Synthesizing</div>
<div class="aur-detail">Drafting response · 73%</div>
</div>
</div>
<div class="aur-caption">animation runs continuously — no hover required</div>
</div> .aur-stage {
background: radial-gradient(ellipse at center, #0a1438 0%, #04081e 80%);
padding: 80px 40px;
min-height: 540px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 28px;
position: relative;
}
.aur-stars {
position: absolute;
inset: 0;
background-image:
radial-gradient(1px 1px at 20% 30%, white, transparent),
radial-gradient(1px 1px at 60% 70%, white, transparent),
radial-gradient(1px 1px at 80% 10%, white, transparent),
radial-gradient(1px 1px at 90% 60%, white, transparent),
radial-gradient(1px 1px at 10% 90%, white, transparent),
radial-gradient(1px 1px at 50% 20%, white, transparent),
radial-gradient(1px 1px at 30% 65%, white, transparent),
radial-gradient(1.5px 1.5px at 75% 40%, white, transparent),
radial-gradient(1px 1px at 40% 85%, white, transparent),
radial-gradient(1.5px 1.5px at 15% 50%, white, transparent),
radial-gradient(1.5px 1.5px at 85% 80%, white, transparent);
opacity: 0.65;
pointer-events: none;
}
.aur-stars::after {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(circle at 25% 70%, rgba(120, 200, 255, 0.08), transparent 60%),
radial-gradient(circle at 75% 30%, rgba(180, 120, 255, 0.08), transparent 60%);
}
.aur-badge {
display: inline-flex;
align-items: center;
gap: 16px;
padding: 18px 32px;
border-radius: 999px;
background: rgba(8, 12, 32, 0.55);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.16);
position: relative;
overflow: hidden;
isolation: isolate;
box-shadow:
0 20px 60px -10px rgba(0,0,0,0.65),
inset 0 1px 0 rgba(255,255,255,0.12);
z-index: 1;
}
.aur-bg {
position: absolute;
inset: -60%;
z-index: -1;
background:
radial-gradient(circle at 20% 50%, #00ffaa 0%, transparent 38%),
radial-gradient(circle at 70% 30%, #b04dff 0%, transparent 50%),
radial-gradient(circle at 50% 80%, #00aaff 0%, transparent 45%),
radial-gradient(circle at 90% 70%, #ff44aa 0%, transparent 40%);
filter: blur(38px);
animation: aur-drift 11s ease-in-out infinite, aur-hue 16s linear infinite;
}
@keyframes aur-drift {
0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); }
25% { transform: translate(7%, -5%) scale(1.08) rotate(18deg); }
50% { transform: translate(-4%, 8%) scale(0.96) rotate(-12deg); }
75% { transform: translate(5%, 5%) scale(1.04) rotate(8deg); }
}
@keyframes aur-hue { to { filter: blur(38px) hue-rotate(360deg); } }
@keyframes aur-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
.aur-bg, .aur-spinner { animation: none; }
}
.aur-spinner {
width: 28px;
height: 28px;
animation: aur-spin 1.6s linear infinite;
position: relative;
z-index: 1;
}
.aur-spinner svg { width: 100%; height: 100%; display: block; }
.aur-text {
text-align: left;
position: relative;
z-index: 1;
}
.aur-label {
font-family: "Italiana", Georgia, serif;
font-size: 22px;
letter-spacing: 0.04em;
color: #fff;
line-height: 1;
margin-bottom: 3px;
}
.aur-detail {
font-family: system-ui, "Bricolage Grotesque", sans-serif;
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(255,255,255,0.72);
}
.aur-caption {
font-family: system-ui, "Bricolage Grotesque", sans-serif;
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(255,255,255,0.32);
position: relative;
z-index: 1;
}