25+ Beautiful CSS Panels (Free Code + Demos)
Enjoy this 100% free and open source collection of HTML and CSS panel code examples. These CSS panels are very flexible and support many use cases.
1. CSS-only Sliding Panels Using Transforms
Sliding panels around to give greater emphasis to the active panel. Uses only CSS :hover states with transform/opacity transitions for maximum performance. Responsively switches to a stacked layout on smaller screens, or by using the .panels--stacked class
Author: Shaw (shshaw)
Links: Source Code / Demo
Made with: HTML, Less, JS
2. Panel Switch Interaction With Flexbox And JS
Author: Susan Lee (susan8098)
Links: Source Code / Demo
Created on: July 21, 2018
Made with: HTML, SCSS, Babel
3. Responsive Flexbox Expanding CSS Panels
This idea sparked from a design I had for a Fortnite-esque portfolio. It never worked how I wanted but now I've learnt about CSS Flex, it's now possible.
Author: Mark (markmead)
Links: Source Code / Demo
Created on: September 1, 2018
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: css-flexbox, responsive flex, expanding flex panels, portfolio design, fortnite
4. Expanding CSS Sections On Hover
Author: James (codebubb)
Links: Source Code / Demo
Created on: October 5, 2018
Made with: HTML, CSS, JS
5. CSS Flex Panels
This cute little boxes resize when clicked. Try to click more than one and see what happens ;)
Author: Adriana Hasbun (AdHasbun)
Links: Source Code / Demo
Created on: August 19, 2017
Made with: HTML, CSS, JS
Tags: flex, flexible boxes, flexbox, resize
6. Full-Width Panel Expansion, CSS Only
A CSS only expanding panel gallery with keyboard support and CSS Vars to progressively enhance with animation. The keyboard support is probably not truly accessible. I'll leave it as an exercise to the reader to add real accessibility aria-roles and JavaScript. Thanks to @davidkpiano for...Read More
Author: Shaw (shshaw)
Links: Source Code / Demo
Created on: September 29, 2017
Made with: HTML, Less
Tags: css, panel, transition, css vars, gallery
7. Multiple Sliding Panels, CSS-only Transforms
WORK IN PROGRESS: Currently the last-child doesn't receive as much space as the others when expanded. Have to find a workaround. Fork it or leave a note in the comments if you have a solution Sliding panels around to give greater emphasis to the active panel. Uses only CSS :hover states w...Read More
Author: Shaw (shshaw)
Links: Source Code / Demo
Created on: August 17, 2016
Made with: HTML, Less, JS
Tags: css, transform, hover, effect
8. Pure CSS Hover
Author: XiChen (xichen)
Links: Source Code / Demo
Created on: June 22, 2017
Made with: Pug, Sass, CoffeeScript
CSS Pre-processor: Sass
JS Pre-processor: CoffeeScript
HTML Pre-processor: Pug
9. Pure CSS Panels
This is an example of onepage panels navigation made with only CSS.
Author: Mattia Astorino (equinusocio)
Links: Source Code / Demo
Created on: April 13, 2015
Made with: HTML, Less
Tags: css, panel, html, animation, anchor
10. Skewed Flexbox Panels
Experimenting with skew transforms applied to a series of flexbox panels. Switches the flex-direction to columns for smaller screen sizes. Click the toggle button to see panel transitions without background images.
Author: Ryan Mulligan (hexagoncircle)
Links: Source Code / Demo
Created on: May 11, 2016
Made with: Pug, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: css, flexbox, skew, panels, hover
11. Dual Sliding Panels
Dual sliding panels with awesome CSS animations. Built with Stylus and vanilla JavaScript. Be sure to checkout the responsive view!
Author: Ettrics (ettrics)
Links: Source Code / Demo
Created on: April 9, 2015
Made with: HTML, Stylus, JS
Tags: sliding, animation, content, responsive, javascript
12. 4 Panel Timeline CSS
CSS only timeline for a client. Mobile styles coming soon.
Author: Jeff Glenn (jeffglenn)
Links: Source Code / Demo
Created on: December 22, 2016
Made with: HTML, SCSS
Tags: timeline, css, panel
13. 4 Panel Timeline CSS
CSS only timeline for a client. Mobile styles coming soon.
Author: Jeff Glenn (jeffglenn)
Links: Source Code / Demo
Created on: December 22, 2016
Made with: HTML, SCSS
Tags: timeline, css, panel
14. CSS3 In 30 Days: Day 25 | Sliding Panels
Day twenty five of Brad Hussey's CSS3 in 30 Days course
Author: Guillermo Cacheda (CachedaCodes)
Links: Source Code / Demo
Created on: January 26, 2018
Made with: HTML, CSS
Tags: css3, sliding, panel
15. Swapping Content Panels With Pure CSS
Swapping content panels with pure CSS. Clicking on one of the radio button labels will change the displayed content panel. This works by using the + adjacent CSS selector. The selection of the current "active" label and slide is achieved by chaining the + adjacent selectors. Cool huh? Th...Read More
Author: Amanda Ashley (coinoperatedgoi)
Links: Source Code / Demo
Created on: December 12, 2017
Made with: Pug, Less, JS
CSS Pre-processor: Less
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: css, content, panel, transition, slide
16. Simple Panel Pure CSS Without JS
Author: sham kaja (shamk04)
Links: Source Code / Demo
Created on: August 28, 2017
Made with: HTML, CSS
Tags: panel, pure-css, without-js
17. Sidebar - Panel Component | Content Hide/show
Side panel with css animated profiles that slide out to reveal extended content. Designed as the menu system for a restaurant. Content will be replaced by form elements and current whitespace will be populated by injected menu sections via Javascript.
Author: Daymon Allen (Daymon-Allen)
Links: Source Code / Demo
Created on: June 1, 2017
Made with: HTML, CSS
Tags: panel, component, css, html
18. Flex Panels With CSS And JS
Flex Panels with CSS and JS
Author: THIAGO CAPELO (thiagokpelo)
Links: Source Code / Demo
Made with: Pug, Stylus, JS
CSS Pre-processor: Stylus
JS Pre-processor: None
HTML Pre-processor: Pug
19. Perspective Boxes
Author: Michał Wilk (devolk)
Links: Source Code / Demo
Created on: January 16, 2017
Made with: HTML, SCSS
Tags: perspective, panel, 3d, flip, box
20. Basic CSS3 Panel Translation
Basic CSS3 panel translation A basic demonstration on how to reveal an hidden panel by taking the advantage of the CSS3 transform Property and apply a Y-axis translation. == Hover the trigger and reveal the panel ==
Author: Stephane Goeuriot (stphn)
Links: Source Code / Demo
Created on: November 29, 2016
Made with: HTML, SCSS
Tags: transform, panel, trigger, translation, css
21. WIDGETS: Ears - Floating Product Panel
WIDGETS: Ears - Floating Product Panel
Author: joniibra (joniibra)
Links: Source Code / Demo
Created on: October 16, 2016
Made with: HTML, CSS
Tags: widgets, floating, float, panel
22. CSS- Only Sliding Panels
Bootstrap based featured block where panels slide to reveal more information. Made with css transitions & transforms.
Author: Kemie (kemie)
Links: Source Code / Demo
Created on: April 27, 2016
Made with: Pug, Less
CSS Pre-processor: Less
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: bootstrap, sliding, panel, animated, transform
23. Social Panel
Author: Azlan (azlan)
Links: Source Code / Demo
Created on: November 9, 2015
Made with: HTML, SCSS
Tags: scss, social, panel
More Awesome Lists:
Share: