A gallery lets you showcase your images, products, and any other web content in an elegant way.
Here is a list of the 10 Best Galleries implemented in Vanilla JavaScript and/or pure HTML/CSS/CSS3.
I hope you like it, and don’t forget to spread the world.
Originally Published Dec 13 2017, updated Dec 22 2025
1. Responsive Lightbox Gallery With Pure JavaScript And CSS3 – lightGallery
A responsive, touch-enabled, dependency-free JavaScript lightbox gallery library that enables you to present various types of media (images, videos, etc) in a fullscreen, scalable, navigatable, shareable, downloadable, and CSS3 animated gallery popup.
More Features:
- 20+ transition animations.
- Auto play when images loaded.
- Infinite looping.
- Supports youtube & vimeo videos, not just images.
- Touch swipe support.
- Pinch to zoom.
- Virtual slides.
- Image captions & descriptions support.
- Arrows, thumbnails, and keyboard navigation.
- Cross browser. Supports all major browsers.
- Easing options support.
- Multiple instances on one page.
- Works with React, Angular, and Vue.js.
- And much more.
2. Responsive Expanding Accordion Gallery With Pure CSS
This is a CSS-only expanding accordion gallery that helps create a responsive, horizontal accordion layout that reveals full-size images with a simple hover.
It’s perfect for showcasing product photos, portfolios, or travel memories – anything where you want to reveal more detail upon user interaction. Plus, the responsive design ensures the accordion gallery looks perfect on all devices from desktops to mobiles.
3. CSS Only Filterable Gallery With Tabs
A CSS-only gallery that combines a filter with tabs.
It allows you to build an elegant gallery filter that uses tabs to filter a group of items by CSS classes. It was written in pure CSS and HTML checkbox elements and works best with lightweight themes.
4. Minimalist Masonry Gallery Layout With CSS Grid – mm-masonry.css
A CSS library that makes use of CSS Grid to create flexible, fluid, Masonry-style image grids similar to Pinterest and Tumblr layouts.
5. Adaptive Image Gallery With Masonry Grid Layout
A lightweight photo gallery that showcases your images in a responsive Masonry grid layout.
It leverages JavaScript to detect screen size and reorder gallery elements accordingly. Images are arranged in a flexible grid with evenly-spaced columns.
As you resize your browser, the gallery automatically transitions between column layouts (from 4 rows on wide screens to 1 row on mobile).
This responsive behavior ensures images are legible and effectively displayed without stretching or overflow issues.
The script automatically handles adjustments, so you don’t have to write media queries. Just plug in your images and let the gallery work its magic.
6. Interactive 3D Rotating Gallery In JavaScript
A 3D perspective rotating gallery that automatically cycles through a series of images displayed on a 3D ring.
It provides a dynamic and interactive way to present product images, portfolio highlights, or any collection of visuals where you want to create a memorable browsing experience.
7. Responsive Fullscreen Image Gallery – Bizon.js
A lightweight JavaScript gallery plugin that displays images in a responsive fullscreen popup. It fetches images from a JavaScript array and generates a thumbnail strip containing all thumbnails that users can click to view the full image.
It fetches images from a JavaScript array and generates a thumbnail strip containing all thumbnails that users can click to view the full image.
8. Lightweight Image Gallery With Lightbox Popup – havLightbox
A lightweight and touch-friendly gallery lightbox JavaScript plugin that allows you to create image galleries with a lightbox overlay.
Visitors can click on thumbnails to view larger versions of the images, and navigate through them using next/previous buttons or by clicking on thumbnails displayed at the bottom of the lightbox.
9. Modern Filterable Gallery With Image Lightbox
A modern, responsive, filterable photo gallery with pretty nice hover & lightbox effects.
Features:
- Fully Responsive
- Completely built with HTML, CSS and JavaScript
- No additional libraries or frameworks
- CSS Transitions for smooth experience
- Removes the body-scroll, when the Lightbox is open
- Clicking on the lightbox “backdrop” will automatically closes the Lightbox.
- Pressing the “Escape” key will also close the Lightbox.
10. Create a Responsive Slanted Grid Gallery With CSS Clip-path
The Slanted Grid Gallery uses CSS clip-path to create a unique layout for image display.
It transforms traditional square or rectangular grids into a collection of irregular quadrilaterals, forming a cohesive rectangular gallery. The result is a creative mosaic-like effect that sets your image collection apart.
This grid gallery is ideal for showcasing photography portfolios, product displays, or any visual content on your site. The irregular shapes and slanted lines create a sense of movement and depth, drawing the user’s eye across the gallery.