26 CSS Accordions — Vertical & Horizontal 26 / 26
Aurora Drift
Closed rows show a faint hue at the edge; open rows bloom into a slow-drifting aurora.
The code
<details class="acc-drift" name="acc-drift" open> <summary>Northern Lights</summary> <p>Charged particles meet the upper atmosphere. The sky turns to ribbon.</p> </details> <details class="acc-drift" name="acc-drift"> <summary>Solar Wind</summary> <p>A constant stream from the sun. Some nights it sings louder than others.</p> </details> <details class="acc-drift" name="acc-drift"> <summary>Geomagnetic Storm</summary> <p>When the wind hits hard, the auroral oval expands south. Rare gift for lower latitudes.</p> </details>
<details class="acc-drift" name="acc-drift" open>
<summary>Northern Lights</summary>
<p>Charged particles meet the upper atmosphere. The sky turns to ribbon.</p>
</details>
<details class="acc-drift" name="acc-drift">
<summary>Solar Wind</summary>
<p>A constant stream from the sun. Some nights it sings louder than others.</p>
</details>
<details class="acc-drift" name="acc-drift">
<summary>Geomagnetic Storm</summary>
<p>When the wind hits hard, the auroral oval expands south. Rare gift for lower latitudes.</p>
</details>.acc-drift {
position: relative; margin-bottom: 6px;
background: #15151d; border-radius: 12px;
border: 1px solid rgba(240,238,255,0.06);
overflow: hidden;
}
.acc-drift::before {
content: ''; position: absolute; inset: -50%;
background:
radial-gradient(ellipse at 20% 30%, rgba(156,123,214,0.5), transparent 55%),
radial-gradient(ellipse at 80% 70%, rgba(143,179,163,0.4), transparent 55%),
radial-gradient(ellipse at 50% 50%, rgba(212,154,92,0.35), transparent 60%);
filter: blur(20px); opacity: 0;
animation: acc-drift-roll 18s linear infinite;
transition: opacity .4s;
pointer-events: none;
}
.acc-drift summary {
cursor: pointer; list-style: none; padding: 13px 16px;
font: 700 13px/1 system-ui; color: rgba(240,238,255,0.7);
position: relative; z-index: 2;
}
.acc-drift summary::-webkit-details-marker { display: none; }
.acc-drift[open]::before { opacity: 0.7; }
.acc-drift[open] > summary { color: #f0eeff; }
.acc-drift p {
margin: 0; padding: 0 16px 14px; position: relative; z-index: 2;
font: 12px/1.55 system-ui; color: rgba(240,238,255,0.7);
}
@keyframes acc-drift-roll {
0% { transform: translate(0,0) rotate(0); }
100% { transform: translate(8%,-6%) rotate(15deg); }
}
@media (prefers-reduced-motion: reduce) {
.acc-drift::before { animation: none; }
} .acc-drift {
position: relative; margin-bottom: 6px;
background: #15151d; border-radius: 12px;
border: 1px solid rgba(240,238,255,0.06);
overflow: hidden;
}
.acc-drift::before {
content: ''; position: absolute; inset: -50%;
background:
radial-gradient(ellipse at 20% 30%, rgba(156,123,214,0.5), transparent 55%),
radial-gradient(ellipse at 80% 70%, rgba(143,179,163,0.4), transparent 55%),
radial-gradient(ellipse at 50% 50%, rgba(212,154,92,0.35), transparent 60%);
filter: blur(20px); opacity: 0;
animation: acc-drift-roll 18s linear infinite;
transition: opacity .4s;
pointer-events: none;
}
.acc-drift summary {
cursor: pointer; list-style: none; padding: 13px 16px;
font: 700 13px/1 system-ui; color: rgba(240,238,255,0.7);
position: relative; z-index: 2;
}
.acc-drift summary::-webkit-details-marker { display: none; }
.acc-drift[open]::before { opacity: 0.7; }
.acc-drift[open] > summary { color: #f0eeff; }
.acc-drift p {
margin: 0; padding: 0 16px 14px; position: relative; z-index: 2;
font: 12px/1.55 system-ui; color: rgba(240,238,255,0.7);
}
@keyframes acc-drift-roll {
0% { transform: translate(0,0) rotate(0); }
100% { transform: translate(8%,-6%) rotate(15deg); }
}
@media (prefers-reduced-motion: reduce) {
.acc-drift::before { animation: none; }
}More from 26 CSS Accordions — Vertical & Horizontal
Underline RevealNumbered StepsPlus / Minus MorphChevron RotateBrutalist StampGlass FrostedMinimal RailCard LiftStrip TabsImage RevealColor BlockNumbered Spine
View the full collection →