CSS Galleries

Here is Trending Collection Free Html and CSS Galleries with code from codepen. Responsive Image Gallery, Lightbox Gallery, Magnific Gallery, Image Gallery with CSS Grid & Flexbox, and more with Code.

Related Article:-

20+ CSS Grid Gallery (Code + Demos)

Best 15+ Bootstrap Photo Gallery Examples With Code

3D Rotating Image Gallery

1. Balkan Style – Portfolio Gallery

See the Pen <a href="https://codepen.io/MightyShaban/pen/LYGzOR" target="_blank" rel="noopener"> Balkan Style – Portfolio Gallery</a> by Srdjan Pajdic (<a href="https://codepen.io/MightyShaban" target="_blank" rel="noopener">@MightyShaban</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Lets start the article with this amazing looking portfolio gallery that is responsive and can be used in your website

Code By-	Srdjan Pajdic
Demo And Download	Click Here For The Code
Language Used	HTML, CSS(Sass), JS
External Links\ Dependencies	Yes
Responsive	Yes

2. HTML5 CSS-Driven Responsive Image Gallery With Captions

See the Pen <a href="https://codepen.io/dudleystorey/pen/KKPdeb" target="_blank" rel="noopener"> HTML5 CSS-Driven Responsive Image Slider With Captions</a> by Dudley Storey (<a href="https://codepen.io/dudleystorey" target="_blank" rel="noopener">@dudleystorey</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

This is a auto moving responsive image slider gallery, this looks very good and like i told you already that this is responsive

Code By-	Dudley Storey
Demo And Download	Click Here For The Code
Language Used	HTML, CSS
External Links\ Dependencies	Yes
Responsive	Yes

3. Gallery

See the Pen <a href="https://codepen.io/kathykato/pen/KRQOKY" target="_blank" rel="noopener"> Gallery</a> by Katherine Kato (<a href="https://codepen.io/kathykato" target="_blank" rel="noopener">@kathykato</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

This is also an amazing example for a image gallery, but this is vertical gallery which also is very responsive

Code By-	Katherine Kato
Demo And Download	Click Here For The Code
Language Used	HTML, CSS(SCSS), JS
External Links\ Dependencies	Yes
Responsive	Yes

4. Bootstrap 4 Lightbox Gallery

See the Pen <a href="https://codepen.io/nsom/pen/VbqLew" target="_blank" rel="noopener"> Bootstrap 4 Lightbox Gallery</a> by Som Nayak (<a href="https://codepen.io/nsom" target="_blank" rel="noopener">@nsom</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

This is amazing looking gallery that also is responsive and user friendly, the little border radius makes it more fantastic

Code By-	Som Nayak
Demo And Download	Click Here For The Code
Language Used	HTML, CSS(SCSS), JS
External Links\ Dependencies	Yes
Responsive	Yes

5. Magnific Gallery

See the Pen <a href="https://codepen.io/mican/pen/awxmpY" target="_blank" rel="noopener"> Magnific Gallery</a> by Michal Niewitala 🍋 (<a href="https://codepen.io/mican" target="_blank" rel="noopener">@mican</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

This one is the best till now, this has a unique design and transitions that makes it more good looking

Code By-	Michal Niewitala 🍋
Demo And Download	Click Here For The Code
Language Used	HTML(Haml), CSS(Sass), JS(CoffeeScript)
External Links\ Dependencies	Yes
Responsive	Yes

6. Image Gallery with CSS Grid & Flexbox

See the Pen <a href="https://codepen.io/GeorgePark/pen/vdqYom" target="_blank" rel="noopener"> Image Gallery with CSS Grid & Flexbox</a> by George W. Park (<a href="https://codepen.io/GeorgePark" target="_blank" rel="noopener">@GeorgePark</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

This is the image gallery with css grid and flexbox, this is responsive and good looking and has a little hover effects

Code By-	George W. Park
Demo And Download	Click Here For The Code
Language Used	HTML, CSS, JS
External Links\ Dependencies	Yes
Responsive	Yes

7. 3D Carousel Gallery

See the Pen <a href="https://codepen.io/dudleystorey/pen/DvZjLz" target="_blank" rel="noopener"> 3D Carousel Gallery</a> by Dudley Storey (<a href="https://codepen.io/dudleystorey" target="_blank" rel="noopener">@dudleystorey</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

This is a 3D gallery for your photos and videos, this is very good looking, creative and unique idea.

Code By-	Dudley Storey
Demo And Download	Click Here For The Code
Language Used	HTML, CSS, JS
External Links\ Dependencies	Yes
Responsive	No

8. Instagram Profile Layout with CSS Grid & Flexbox

See the Pen <a href="https://codepen.io/GeorgePark/pen/VXrwOP" target="_blank" rel="noopener"> Instagram Profile Layout with CSS Grid & Flexbox</a> by George W. Park (<a href="https://codepen.io/GeorgePark" target="_blank" rel="noopener">@GeorgePark</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

This is a gallery and a instagram profile layout, its made with CSS grid and flexbox and is responsive

Code By-	George W. Park
Demo And Download	Click Here For The Code
Language Used	HTML, CSS, JS(Babel)
External Links\ Dependencies	Yes
Responsive	Yes

9. GSAP ScrollTrigger – Demo

See the Pen <a href="https://codepen.io/noeldelgado/pen/BaogqYy" target="_blank" rel="noopener"> GSAP ScrollTrigger – Demo</a> by Noel Delgado (<a href="https://codepen.io/noeldelgado" target="_blank" rel="noopener">@noeldelgado</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

When you scroll down then the image gallery will slide in from sides and that looks very creative

Code By-	Noel Delgado
Demo And Download	Click Here For The Code
Language Used	HTML(Haml), CSS(PostCSS), JS(Babel)
External Links\ Dependencies	Yes
Responsive	No

10. Bootstrap Gallery with Modal and Carousel

See the Pen <a href="https://codepen.io/webcane/pen/XWRbJd" target="_blank" rel="noopener"> Bootstrap Gallery with Modal and Carousel</a> by Mikhail Niedre (<a href="https://codepen.io/webcane" target="_blank" rel="noopener">@webcane</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

This is also an amazing image gallery when you click one image then you can see it in different resolution

Code By-	Mikhail Niedre
Demo And Download	Click Here For The Code
Language Used	HTML, CSS, JS
External Links\ Dependencies	Yes
Responsive	Yes

11. Responsive Image Gallery with jQuery Lightbox

See the Pen <a href="https://codepen.io/mmgolden/pen/YrGddm" target="_blank" rel="noopener"> Responsive Image Gallery with jQuery Lightbox</a> by Melinda Golden (<a href="https://codepen.io/mmgolden" target="_blank" rel="noopener">@mmgolden</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

This is a amazing looking gallery example that is just awesome, this is responsive, user friendly, unique and creative

Code By-	Melinda Golden
Demo And Download	Click Here For The Code
Language Used	HTML, CSS(SCSS), JS
External Links\ Dependencies	Yes
Responsive	Yes

12. Magnific Gallery V2

See the Pen <a href="https://codepen.io/mican/pen/RyjZgm" target="_blank" rel="noopener"> Magnific Gallery V2</a> by Michal Niewitala 🍋 (<a href="https://codepen.io/mican" target="_blank" rel="noopener">@mican</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

This is another example of responsive and good looking CSS gallery that is really complex but simple

Code By-	Michal Niewitala 🍋
Demo And Download	Click Here For The Code
Language Used	HTML(Pug), CSS(SCSS), JS(CoffeeScript)
External Links\ Dependencies	Yes
Responsive	Yes

13. lightSlider

See the Pen <a href="https://codepen.io/sachinchoolur/pen/mdZJRx" target="_blank" rel="noopener"> lightSlider</a> by Sachin choolur (<a href="https://codepen.io/sachinchoolur" target="_blank" rel="noopener">@sachinchoolur</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

This is also an amazing looking and unique example of the gallery, it also has buttons to slide images

Code By-	Sachin choolur
Demo And Download	Click Here For The Code
Language Used	HTML, CSS, JS
External Links\ Dependencies	Yes
Responsive	No

14. Accordion Image Gallery

See the Pen <a href="https://codepen.io/stefcharle/pen/Gydvbx" target="_blank" rel="noopener"> Accordion Image Gallery</a> by Stefan C. (<a href="https://codepen.io/stefcharle" target="_blank" rel="noopener">@stefcharle</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

This is amazing looking gallery in which images expands when hovered over them

Code By-	Stefan C.
Demo And Download	Click Here For The Code
Language Used	HTML, CSS(SCSS)
External Links\ Dependencies	Yes
Responsive	No

15. lightgallery.js

See the Pen <a href="https://codepen.io/sachinchoolur/pen/qNyvGW" target="_blank" rel="noopener"> lightgallery.js</a> by Sachin choolur (<a href="https://codepen.io/sachinchoolur" target="_blank" rel="noopener">@sachinchoolur</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

This is also good looking and simple gallery example for your photos

Code By-	Sachin choolur
Demo And Download	Click Here For The Code
Language Used	HTML, CSS, JS
External Links\ Dependencies	Yes
Responsive	Yes

16. DailyUI #016 – Popup / Overlay

See the Pen <a href="https://codepen.io/supah/pen/ZWGJeR" target="_blank" rel="noopener"> DailyUI #016 – Popup / Overlay</a> by Fabio Ottaviani (<a href="https://codepen.io/supah" target="_blank" rel="noopener">@supah</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

This is also an amazing looking gallery with lots of images that is responsive and very good looking

Code By-	Fabio Ottaviani
Demo And Download	Click Here For The Code
Language Used	HTML, CSS(SCSS), JS
External Links\ Dependencies	Yes
Responsive	Yes

16. 3D images gallery

See the Pen <a href="https://codepen.io/ImBobby/pen/DqEYQz" target="_blank" rel="noopener"> 3D images gallery</a> by Bobby (<a href="https://codepen.io/ImBobby" target="_blank" rel="noopener">@ImBobby</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

This is another 3D Gallery example but this one is spinning on its own which makes it more good looking

Code By-	Bobby
Demo And Download	Click Here For The Code
Language Used	HTML, CSS, JS
External Links\ Dependencies	Yes
Responsive	No

17. Bootstrap gallery

See the Pen <a href="https://codepen.io/dashbouquetdevelopment/pen/mBvQrB" target="_blank" rel="noopener"> Bootstrap gallery</a> by Dash Bouquet (<a href="https://codepen.io/dashbouquetdevelopment" target="_blank" rel="noopener">@dashbouquetdevelopment</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

This is also an amazing looking example of bootstrap gallery that obviously is responsive

Code By-	Dash Bouquet
Demo And Download	Click Here For The Code
Language Used	HTML, CSS
External Links\ Dependencies	Yes
Responsive	Yes

18. Center Text Over an Image (Vertical Align Middle)

See the Pen <a href="https://codepen.io/g13nn/pen/NWyMOK" target="_blank" rel="noopener"> Center Text Over an Image (Vertical Align Middle)</a> by Glenn Smith (<a href="https://codepen.io/g13nn" target="_blank" rel="noopener">@g13nn</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

This is also an amazing gallery that has a hover effect which activates a text on the image

Code By-	Glenn Smith
Demo And Download	Click Here For The Code
Language Used	HTML, CSS
External Links\ Dependencies	Yes
Responsive	Yes

Thanks For Visiting Codewithrandom Blog!

CodeWithRandom

23 CSS Galleries

CSS Galleries

Leave a Reply Cancel reply

Navigate

Subscribe Now

CSS Galleries

You Might Also Like

Create Student Registration Form Using HTML and CSS with Code

How to design HTML Loader using HTML CSS JAVASCRIPT

Reverse Countdown Timer Using JavaScript

Leave a Reply Cancel reply

Navigate

Subscribe Now