A frosted panel accordion built with pure HTML and CSS that combines expandable content sections with a translucent glass style background. It enhances visual layering and modern UI aesthetics while maintaining responsive structure.
Usage
Use this component when interfaces require glassmorphism inspired expandable sections, such as landing pages, feature explanations, dashboards, or FAQ layouts that benefit from soft background diffusion.
Implementation
The frosted effect is created using backdrop filter and semi transparent background styling, paired with CSS state selectors for panel expansion. Smooth transitions maintain readability and consistent behavior across screen sizes.
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
- Built with pure HTML and CSS
- No JavaScript required
- Uses frosted glass style background effects
- Enhances modern visual layering
- Fully responsive across breakpoints
- Suitable for landing pages and dashboards
- Easy to customize blur intensity and transparency
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.