26 CSS Accordions — Vertical & Horizontal
Aurora Strip
Each panel hides a drifting aurora gradient — pop into view by widening the active strip.
Aurora Strip the 16th of 26 designs in the 26 CSS Accordions — Vertical & Horizontal 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="acc-aur">
<input type="radio" name="aur" id="aur-1" checked />
<input type="radio" name="aur" id="aur-2" />
<input type="radio" name="aur" id="aur-3" />
<label for="aur-1" class="acc-aur__c">
<span class="acc-aur__l">North</span>
<span class="acc-aur__d">Cold violet ribbon, 22:00 local</span>
</label>
<label for="aur-2" class="acc-aur__c">
<span class="acc-aur__l">East</span>
<span class="acc-aur__d">Warm copper veil, 23:30 local</span>
</label>
<label for="aur-3" class="acc-aur__c">
<span class="acc-aur__l">West</span>
<span class="acc-aur__d">Soft sage glow, 01:00 local</span>
</label>
</div> .acc-aur {
display: flex; gap: 4px; height: 220px;
border-radius: 12px; overflow: hidden;
}
.acc-aur > input { display: none; }
.acc-aur__c {
flex: 1; cursor: pointer; padding: 16px; position: relative;
background:
radial-gradient(ellipse at 30% 20%, rgba(156,123,214,0.5), transparent 60%),
radial-gradient(ellipse at 70% 80%, rgba(212,154,92,0.4), transparent 60%),
#15151d;
background-size: 220% 220%, 240% 240%, 100% 100%;
background-position: 0% 0%, 100% 100%, 0 0;
display: flex; flex-direction: column; justify-content: flex-end;
filter: brightness(0.55) saturate(0.8);
transition: flex .5s cubic-bezier(.3,1,.3,1), filter .35s, background-position 6s linear;
}
.acc-aur__c:nth-of-type(2) {
background:
radial-gradient(ellipse at 50% 40%, rgba(212,154,92,0.55), transparent 60%),
radial-gradient(ellipse at 80% 70%, rgba(143,179,163,0.4), transparent 60%),
#15151d;
}
.acc-aur__c:nth-of-type(3) {
background:
radial-gradient(ellipse at 20% 80%, rgba(143,179,163,0.55), transparent 60%),
radial-gradient(ellipse at 70% 30%, rgba(156,123,214,0.4), transparent 60%),
#15151d;
}
.acc-aur__l { font: 800 12px/1 system-ui; letter-spacing: 0.16em; color: rgba(240,238,255,0.85); }
.acc-aur__d { font: 11px/1.55 system-ui; color: rgba(240,238,255,0.55); margin-top: 6px;
opacity: 0; transition: opacity .3s .15s; }
#aur-1:checked ~ [for="aur-1"],
#aur-2:checked ~ [for="aur-2"],
#aur-3:checked ~ [for="aur-3"] {
flex: 4; filter: brightness(1.05) saturate(1.1);
background-position: 100% 100%, 0% 0%, 0 0;
}
#aur-1:checked ~ [for="aur-1"] .acc-aur__d,
#aur-2:checked ~ [for="aur-2"] .acc-aur__d,
#aur-3:checked ~ [for="aur-3"] .acc-aur__d { opacity: 1; } More from 26 CSS Accordions — Vertical & Horizontal
Glass FrostedMinimal RailCard LiftStrip TabsImage RevealColor BlockNumbered SpineCurtain SlideVinyl SpineCinema ReelDiagonal SlantStepped Stair
View the full collection →