This accordion blends into surrounding surfaces, using subtle tone shifts instead of borders or icons.
HTML
<div class="accordion">
<details class="accordion-item">
<summary class="accordion-trigger">Overview</summary>
<div class="accordion-panel">
<p>
Flush surface accordion with smooth motion and
zero layout shift.
</p>
</div>CSS
.accordion {
width: 200px;
background: #ececec;
border-radius: 14px;
font-family: system-ui, -apple-system, sans-serif;
overflow: hidden;
}
.accordion summary {
list-style: none;
}
.accordion summary::-webkit-details-marker {
display: none;
}
.accordion-item {
border-bottom: 1px solid #d4d4d4;
}
.accordion-item:last-child {
border-bottom: none;
}
.accordion-trigger {
padding: 0.75rem 0.9rem;
font-size: 13px;
font-weight: 500;
color: #1f2937;
cursor: pointer;
user-select: none;
transition: background 160ms ease;
}
.accordion-trigger:hover {
background: rgba(255, 255, 255, 0.4);
}
.accordion-panel {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 240ms ease;
}
.accordion-panel > p {
overflow: hidden;
padding: 0 0.9rem;
font-size: 12px;
color: #374151;
line-height: 1.5;
}
.accordion-item[open] .accordion-panel {
grid-template-rows: 1fr;
}
.accordion-item[open] .accordion-panel > p {
padding: 0.6rem 0.9rem 0.9rem;
}Notes
- Flush surface styling
- Minimal visual separation
- Works well in dense dashboards
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.