Number of decks:
Title width: px
Title height: px
Title font size: px
Content padding: px
Content height: px
Border radius: px
Border size: px

More Developer Tools 🚀

Best Button Generator

Old school button generator, no AI, no Code!

Convert Color Code

hex, rgb, hsl, hsv and x11 color names

Be the first to know about new tools

By joining our newsletter, you agree to receive email updates from us.

CSS Accordion Slider Generator

Create fully responsive, css-only accordion sliders

Vertical accordion slider

Horizontal accordion slider

How it works?
  • Play the css settings, change colors, deck count, slider dimensions etc.
  • When you are happy with the final result, you can either download this preview as an HTML file or directly copy generated CSS and HTML codes on the right hand side.
  • The generated accordion slider is pure CSS and HTML and there is no JavaScript.
  • The slider can be used as a gallery, product tour, portfolio showcase, content slider etc.
  • This is a free tool and all the code you generate can be used without any license issues.
About & FAQ



This tool is a free online generator that allows you to create cross browser css-only (no javascript) responsive "Accordion Slider"s in seconds.

What is an accrodion slider?

An accordion slider is a versatile web design element that allows you to display and organize content in a space-efficient and visually appealing manner. It's often used to showcase images, text, or multimedia content in a compact format that expands or contracts, resembling the folds of an accordion. These sliders are popular for creating interactive and user-friendly websites, as they provide an elegant way to present information while conserving screen real estate. Whether you're highlighting product features, sharing portfolio items, or conveying important messages, an accordion slider can engage your audience with its seamless transitions and responsive design, making it an essential tool for modern web developers.


How to create a responsive accordion slider?

Which properties are available for editing?

You can modify following properties:

In addition to this properties, you can also change accordion's class name.

Which browsers do you support?

The generated code includes vendor prefixes for Google Chrome, Firefox, Safari, Opera, and Internet Explorer, ensuring seamless performance across multiple browsers.

Further inspiration

On Smashing Magazine, there is a really well written article about designing accordion sliders. You can check it out to get an idea of different concepts and use cases of accordion sliders.

Elevate your web design with – where CSS-only, responsive accordion sliders come to life effortlessly.