CP

CSS Accordion Generator

Home/Tools/Accordion Generator

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

No sign-up neededRuns in your browserProduction-ready CSS

Accordion Style

12px
16px
8px
300ms

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;
}

Related Tools

Button Generator

Design professional UI buttons with custom styles, gradients, and hover states.

Card Generator

Build modern UI cards with custom shadows, borders, and glass effects.

Tooltip Generator

Generate customizable tooltips with various positions and animations.