EspañolPhoto gallery for websites (with lightbox)
Paste the image URLs (one per line, with an optional caption after a pipe). Choose the columns and corners and copy the ready block.
How to useGallery with enlarged photos
Available in: 
Photo gallery for websites (with lightbox): what it is for
A well-made photo gallery shows your work, your space and your products without weighing down the page. This generator builds the responsive grid with CSS grid, choosing the number of columns on desktop and phone, the thumbnail shape and the corners.
Tapping a photo opens it enlarged using the native HTML dialog element, with on-screen and keyboard arrows, a caption and closing with Esc or by tapping outside. Thumbnails load lazily and the caption becomes the alt text, good for accessibility and image SEO.
How to use
- Paste the photo URLs with captions.
- Choose columns, shape and corners.
- Copy the code and paste it into your site.
When to use it
- Portfolio for a photographer, barber or architect.
- Photos of a restaurant or store space.
- Before and after of services.
Frequently asked questions
Does it work without a library?
Yes. The grid is CSS grid and the lightbox uses the browser's native dialog element, which already handles the dark backdrop, focus and closing with the Esc key. The script is just a few lines, only to switch photos.
Do the photos slow down loading?
Thumbnails use loading=lazy and decoding=async: they only download when they get close to the screen. To make it even lighter, create smaller versions for the thumbnails (the images for websites tool does that) and use the large one only in the lightbox.
Do I need captions?
The caption becomes the photo's alt text, which screen readers read and which helps image SEO. Describe what is shown, such as "Fade haircut with beard", instead of "photo 1".
Is it really free?
Yes, 100% free. No sign-up, no subscription and no usage limits. All Tools123 tools are free and run right in your browser.