CSS components

CSS Image Gallery Lightbox Generator

Paste your image links, choose the grid, hover effect and lightbox style, and get a ready-to-use gallery with a full-screen viewer. No jQuery and no plugins, just small vanilla JavaScript.

Use full image URLs or paths from your own site, such as /images/photo-1.jpg. The sample photos come from picsum.photos and need an internet connection to show.

Live preview




 Runs entirely in your browser. Nothing is uploaded to any server.







Why use this lightbox generator
No dependencies
About 60 lines of plain JavaScript instead of a heavy plugin.
Accessible by default
Real links, alt text, focus return, Escape, arrows and an ARIA dialog.
Works on phones
Swipe between photos and the grid drops to two columns on small screens.



How to build your gallery
  1. Add your imagesPaste one image URL per line and add an optional caption after a | sign.
  2. Style the gridPick columns, gap, thumbnail shape, corners and a hover effect.
  3. Copy the codeCopy the HTML, CSS and JavaScript or download a complete page.



How the lightbox works
Each thumbnail is a normal link to the full-size image, so the gallery still works if JavaScript fails: the link simply opens the image. When the script runs, it intercepts the click and shows the image in a fixed overlay instead.
The overlay is hidden with opacity and visibility rather than display, which lets it fade or zoom in smoothly and keeps its buttons out of the tab order while it is closed. Focus moves to the close button on open and returns to the thumbnail on close.
Thumbnails
object-fit: cover crops each image to the chosen aspect ratio.
Keyboard
Left and right arrows change images, Escape closes the viewer.
Reduced motion
Animations switch off for visitors who ask for less motion.



Image gallery lightbox FAQ


Do I need jQuery or a lightbox plugin?
No. The generated lightbox uses a few lines of plain JavaScript and works in all modern browsers.


Can I use different files for thumbnails and full images?
Yes. After copying the code, change the src of each thumbnail img to a smaller file and keep the full-size file in the link href.


Is the gallery accessible?
Thumbnails are real links with alt text, the viewer is an ARIA dialog, it can be closed with Escape and focus returns to the thumbnail you opened.


Does it work on mobile?
Yes. The grid becomes two columns on small screens, and you can swipe left or right in the viewer to change images.


Can I add more than one gallery on a page?
The generated script handles one gallery and one overlay. For several galleries, wrap the script in a function and run it once per gallery container.





Try other CSS component tools
More free tools from My Panda Toolbox.

GRIDCSS Image Gallery GeneratorGallery layouts.
MASCSS Masonry Layout GeneratorPinterest-style grids.
MODCSS Modal GeneratorPopup dialogs.
ZOOMCSS Image Hover ZoomHover effects.