How does the accordion expand and collapse without JavaScript animation?

The body's `max-height` is transitioned from 0 to a fixed value (240px here) whenever the parent has an .open class. Only a class toggle is needed in JavaScript — the smooth expand/collapse motion itself is pure CSS.

What if my content is taller than the fixed max-height?

Content taller than the max-height value will be clipped. Either raise the max-height in the generated CSS to a value comfortably larger than your tallest panel's content, or switch to a `grid-template-rows: 0fr` / `1fr` transition technique, which handles arbitrary content heights automatically.

Can I have multiple accordion items where only one is open at a time?

Yes — this CSS only styles a single .accordion-item; to make items exclusive, add a small script that removes the .open class from sibling items when one is clicked, or use radio inputs with the same name in a CSS-only implementation.

Is this accordion accessible?

Use a real for the header (keyboard-focusable by default) and set aria-expanded on it, toggling it alongside the .open class. Give the body a matching id and reference it with aria-controls on the button.

Does this tool send my design anywhere?

No — everything runs locally in your browser. The CSS is generated in real time and nothing is uploaded to a server.

CSS ACCORDION GENERATOR

Build a collapsible accordion panel, then copy the CSS and matching HTML.

It expands and collapses using a max-height transition driven by an .open class — no JavaScript animation needed.

Corner radius: 6px

Transition: 0.25s

Header background

Body background

Text color

Open accent

.accordion-item {
  border: 1px solid #2a2521;
  border-radius: 6px;
  overflow: hidden;
}

.accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: #2a2521;
  color: #f2e9dc;
  cursor: pointer;
  user-select: none;
}

.accordion-header .icon {
  transition: transform 0.25s ease;
}

.accordion-item.open .accordion-header .icon {
  transform: rotate(180deg);
  color: #ff6a35;
}

.accordion-body {
  max-height: 0;
  overflow: hidden;
  background: #201d19;
  color: #f2e9dc;
  transition: max-height 0.25s ease;
}

.accordion-item.open .accordion-body {
  max-height: 240px;
}

.accordion-body-inner {
  padding: 16px 18px;
}

How to build a CSS accordion

1
Click the header in the preview to expand and collapse the panel.
2
Pick the header background, body background, text, and open-icon accent colors.
3
Adjust the corner radius and transition speed.
4
Copy the generated CSS and the matching HTML structure.

Questions

How does the accordion expand and collapse without JavaScript animation?: The body's `max-height` is transitioned from 0 to a fixed value (240px here) whenever the parent has an .open class. Only a class toggle is needed in JavaScript — the smooth expand/collapse motion itself is pure CSS.
What if my content is taller than the fixed max-height?: Content taller than the max-height value will be clipped. Either raise the max-height in the generated CSS to a value comfortably larger than your tallest panel's content, or switch to a `grid-template-rows: 0fr` / `1fr` transition technique, which handles arbitrary content heights automatically.
Can I have multiple accordion items where only one is open at a time?: Yes — this CSS only styles a single .accordion-item; to make items exclusive, add a small script that removes the .open class from sibling items when one is clicked, or use radio inputs with the same name in a CSS-only implementation.
Is this accordion accessible?: Use a real <button> for the header (keyboard-focusable by default) and set aria-expanded on it, toggling it alongside the .open class. Give the body a matching id and reference it with aria-controls on the button.
Does this tool send my design anywhere?: No — everything runs locally in your browser. The CSS is generated in real time and nothing is uploaded to a server.