Centered Soft Expand Accordion

A centered soft expand accordion built with pure HTML and CSS that presents expandable panels within a horizontally centered layout. It uses smooth, low intensity transitions to create a calm and balanced expansion effect.

Usage

Use this component when interfaces require visually balanced expandable sections, such as landing page FAQs, feature explanations, onboarding guides, or marketing layouts where symmetry enhances readability.

Implementation

The expansion behavior is controlled using CSS state selectors and gentle transition timing, while the container uses centered alignment and controlled max width for visual balance. Responsive styling ensures consistent stacking across devices.

HTML

<details class="accordion-soft">
  <summary class="accordion-soft__trigger">
    Details
  </summary>

  <div class="accordion-soft__content">
    Additional information shown here.
  </div>
</details>

<details class="accordion-soft">
  <summary class="accordion-soft__trigger">
    Details
  </summary>

  <div class="accordion-soft__content">
    Additional information shown here.
  </div>
</details>

CSS

.accordion-soft {
  width: 200px;
  text-align: center;
}

.accordion-soft__trigger {
  list-style: none;
  width: 100%;
  padding: 0.6rem;
  border-radius: 12px;

  background: #6366f1;
  color: #ffffff;

  font-size: 13px;
  cursor: pointer;
  user-select: none;
}

.accordion-soft__trigger::-webkit-details-marker {
  display: none;
}

.accordion-soft__content {
  overflow: hidden;

  margin-top: 0.5rem;
  padding: 0 0.6rem;

  border-radius: 10px;
  background: #f9fafb;
  color: #111827;

  font-size: 12px;

  max-height: 0;
  opacity: 0;
  transform: translateY(-4px);

  transition:
    max-height 300ms ease,
    opacity 200ms ease,
    transform 200ms ease,
    padding 300ms ease;
}

.accordion-soft[open] .accordion-soft__content {
  max-height: 120px;
  padding: 0.6rem;
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-color-scheme: dark) {
  .accordion-soft__content {
    background: #1f2937;
    color: #e5e7eb;
  }
}

.accordion-soft {
  width: 200px;
  text-align: center;
}

.accordion-soft__trigger {
  list-style: none;
  width: 100%;
  padding: 0.6rem;
  border-radius: 12px;

  background: #6366f1;
  color: #ffffff;

  font-size: 13px;
  cursor: pointer;
  user-select: none;
}

.accordion-soft__trigger::-webkit-details-marker {
  display: none;
}

.accordion-soft__content {
  overflow: hidden;

  margin-top: 0.5rem;
  padding: 0 0.6rem;

  border-radius: 10px;
  background: #f9fafb;
  color: #111827;

  font-size: 12px;

  max-height: 0;
  opacity: 0;
  transform: translateY(-4px);

  transition:
    max-height 300ms ease,
    opacity 200ms ease,
    transform 200ms ease,
    padding 300ms ease;
}

.accordion-soft[open] .accordion-soft__content {
  max-height: 120px;
  padding: 0.6rem;
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-color-scheme: dark) {
  .accordion-soft__content {
    background: #1f2937;
    color: #e5e7eb;
  }
}

Notes

• Built with pure HTML and CSS
• No JavaScript required
• Uses soft transition based expansion
• Enhances center aligned layout balance
• Fully responsive across breakpoints
• Suitable for landing pages and marketing sections
• Easy to customize spacing and animation duration

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.