Accordion Generator

Build interactive CSS accordions with custom colors, animation speed, and border styles.

Accordion Style

Border Radius12px

Content Padding16px

Item Gap8px

Animation Speed300ms

Border Color

Header Background

Active Header Background

Active Header Text Color

Preview — click to toggle

CSS (Cascading Style Sheets) is a style sheet language used for describing the presentation of a document written in HTML.

Flexbox is a one-dimensional layout method for arranging items in rows or columns. Items flex to fill additional space or shrink to fit smaller spaces.

CSS Grid Layout is a two-dimensional layout system for the web. It lets you lay content out in rows and columns, and has many features that make building complex layouts straightforward.

Generated CSS

.accordion {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.accordion-item {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
}

.accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px;
  background: #ffffff;
  color: #111827;
  cursor: pointer;
  font-weight: 600;
  transition: background 300ms ease, color 300ms ease;
  border: none;
  width: 100%;
  text-align: left;
}

.accordion-header:hover,
.accordion-header[aria-expanded="true"] {
  background: #eff6ff;
  color: #2563eb;
}

.accordion-header .chevron {
  transition: transform 300ms ease;
}

.accordion-header[aria-expanded="true"] .chevron {
  transform: rotate(180deg);
}

.accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 300ms ease, padding 300ms ease;
  background: #ffffff;
  color: #6b7280;
  font-size: 14px;
  line-height: 1.6;
  padding: 0 16px;
}

.accordion-body.open {
  max-height: 200px;
  padding: 16px;
}

100%

Free, no
sign-up needed

Code written
by hand

85+

CSS tools
in one place

<1s

Copy-ready
CSS instantly

What is this

What is the CSS Accordion Generator?

Build animated CSS accordions using the details/summary HTML elements. No JavaScript required for open/close functionality.

Everything runs locally in your browser. Adjust the controls above, preview instantly, and copy clean, production-ready CSS — no account, no upload.

How to use

Using the CSS Accordion Generator

Everything lives in the panel at the top of this page. There is nothing to install — it all runs right here in your browser.

Set spacing and borders

Adjust the summary padding and border style. Common accordions use 14-16px vertical padding in the summary.

Choose animation style

The CSS-only version uses the browser default details open/close (instant). Smooth height animation requires JavaScript or the experimental interpolate-size: allow-keywords property.

Copy the CSS and HTML

Click Copy to get the CSS. The generator also shows the minimal HTML with details, summary, and content div.

The output

What the generated code looks like

Clean, production-ready CSS — no vendor bloat, no unnecessary declarations.

accordion.css

details.accordion {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 8px;
}

details.accordion summary {
  padding: 14px 20px;
  cursor: pointer;
  font-weight: 600;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
}

details.accordion summary::after {
  content: '+';
  font-size: 1.25rem;
  transition: transform 0.2s;
}

details.accordion[open] summary::after {
  transform: rotate(45deg);
}

details.accordion .accordion-body {
  padding: 0 20px 14px;
}

The HTML details and summary elements provide open/close behaviour natively. No JavaScript is required. The open attribute is added by the browser when the details element is expanded.

Pro tips

Pro tips for better results

★

CSS-only height animation is now possible in Chrome 129+

Chrome 129 added interpolate-size: allow-keywords to the :root. This enables transition: height 0.3s allow-discrete on the details element without JavaScript.

FAQ

Frequently asked questions

Add the name attribute to all <details> elements in the group: <details name="faq">. Chrome 120+ closes previously open items automatically when a new one opens. This is the exclusive accordion pattern.

Add the open attribute to the details element: <details open class="accordion">. The item will render in the open state on page load.