This accordion uses a frosted panel surface and opacity transitions to reveal content without heavy motion.
HTML
<details class="accordion-frosted">
<summary class="accordion-frosted__trigger">
Details
</summary>
<div class="accordion-frosted__content">
Additional information shown here.
</div>
</details>CSS
.accordion-frosted {
width: 200px;
text-align: center;
}
.accordion-frosted__trigger {
list-style: none;
width: 100%;
padding: 0.6rem;
border-radius: 14px;
border: none;
background: rgba(99, 102, 241, 0.15);
color: #3730a3;
font-size: 13px;
cursor: pointer;
user-select: none;
}
.accordion-frosted__trigger::-webkit-details-marker {
display: none;
}
.accordion-frosted__content {
overflow: hidden;
margin-top: 0.5rem;
padding: 0 0.6rem;
border-radius: 12px;
font-size: 12px;
color: #111827;
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(10px);
max-height: 0;
opacity: 0;
transform: translateY(-4px);
transition:
max-height 320ms ease,
opacity 200ms ease,
transform 200ms ease,
padding 320ms ease;
}
.accordion-frosted[open] .accordion-frosted__content {
max-height: 120px;
padding: 0.6rem;
opacity: 1;
transform: translateY(0);
}
@media (prefers-color-scheme: dark) {
.accordion-frosted__trigger {
background: rgba(129, 140, 248, 0.25);
color: #e0e7ff;
}
.accordion-frosted__content {
background: rgba(17, 24, 39, 0.8);
color: #e5e7eb;
}
}Notes
- Glass-style accordion surface
- Soft visual separation without icons
- Works well in dense UI previews
Preview styles shown. Production customization recommended.
Browse More UI Components
Explore hundreds of reusable HTML & CSS UI components built for modern web projects.
Discover buttons, cards, loaders, animations, layouts, and more all with live previews and clean, copy-paste code.