70+ CSS Galleries: Free Code Snippets & Portfolio Examples

An interactive image gallery accordion leveraging CSS Grid and :has() selectors. Column ratios expand dynamically on hover via custom property --grid-cols. Cards use overlapping grid coordinates and corner-shape: notch with border-radius to create angled panels. Hovering removes the notch on active and adjacent cards while displaying CSS counter() labels.

This creative image gallery generates a dynamic visual trail following the user’s cursor. Built with vanilla JavaScript, the script measures pointer displacement using hypotenuse mathematics. Once the cursor exceeds a relative distance threshold, the next image in the queue spawns directly under the pointer with an incrementing depth index, while older trail elements automatically deactivate.

This interactive image gallery showcases an organic full-screen grid transition powered by clipping bounds. By masking a multi-column CSS grid of photographs with clip-path: inset(), the initial state reveals only a rounded, centered viewport window. A simple JavaScript click toggle expands the mask boundaries to full scale, transforming the thumbnail window into a comprehensive gallery.

A zero-JavaScript responsive mosaic gallery built entirely on native CSS Grid. The grid system adapts dynamically through CSS Custom Variables and column-span mappings across responsive breakpoints, utilizing performance containment properties (contain: size) to prevent layout shifting. Features a centered, overlapping circular highlight portrait.

This is a Scroll-Driven Radial Gallery. It binds a circular, rotating layout directly to the viewport’s scroll position. Its function is to transform linear page scrolling into a dynamic, spatial carousel, keeping only the active item in sharp focus while pushing others into a blurred, grayscale periphery.

This is a collection of Complex Geometric Image Masks. It shapes standard rectangular images into precise, multi-part vector forms using a single HTML node. Its function is to break rigid grid layouts and introduce structural visual interest without requiring external SVG assets.

This is a Responsive Fluid Photo Gallery Grid. It organizes varied aspect-ratio images into justified rows without cropping essential content. Its primary function is to optimize visual space, ensuring edge-to-edge alignment while deferring offscreen asset loading for strict performance control. (Requires: lazysizes, object-fit-images)

This is a CSS :has() Character Select Screen. It replicates the classic user interface of a fighting game’s selection menu, using modern CSS to handle all state logic. Its function is to demonstrate how the :has() pseudo-class can completely replace JavaScript for managing visibility in a selection-based UI, triggering changes in the main content area based on the state of a radio button group. (Requires: Vue)

This is a Clipping Quadrant Image Gallery. It segments a full-screen display into four interactive quadrants, each housing a unique photograph. Upon clicking any segment, the component utilizes the clip-path property to instantly expand that specific quadrant to cover the entire viewport, transitioning from a mosaic-style grid into a singular, immersive view.

This is an Interactive Radial CSS Image Carousel. It arranges a deck of image cards into a curved, fan-like layout. Its function is to provide an engaging, space-saving gallery interface where hovering over a card gracefully shifts its neighbors away along a circular path, bringing the focused item into clear view without relying on JavaScript math.

This is a Dynamic Circular Avatar Gallery. It arranges a series of profile images into a perfect circle that smoothly expands when interacted with. Its function is to showcase user groups or team members in a compact, engaging format, using cutting-edge CSS math instead of JavaScript to handle complex radial positioning and dynamic item counting.

This is a Smooth View Transition Grid Cards component. It transforms a standard CSS Grid of cards into an interactive, animated gallery. Its function is to elegantly expand a selected item to full width, smoothly reflowing the remaining siblings using native browser rendering instead of complex JavaScript math.

This Trigonometric 3D Orbit Gallery is a stunning example of “Code Art,” demonstrating the raw power of modern CSS mathematics. Instead of relying on rigid keyframes for positioning, it uses parametric equations to place and animate 32 images along a complex, fluid 3D curve in real-time, creating a perpetual motion machine effect purely with stylesheets.

Images appear as jigsaw puzzle pieces with interlocking edges that can visually fit together.

A pure CSS expanding gallery powered by the modern :has() selector. Hovering triggers a grid-template-columns transition, widening the active item while revealing content via opacity and transform animations, all styled with blend modes for a tinted monochrome aesthetic.

A unique, dynamic, and responsive collage of images that uses advanced CSS techniques to create a 3D-like geometric pattern.

A pure CSS image gallery that leverages the advanced :has() pseudo-class and radio input hacks to orchestrate state changes without JavaScript. The layout utilizes CSS Grid variables to dynamically translate the viewport, creating a smooth, easing-based transition between full-screen images controlled entirely by sibling combinators and checked states.

A lightweight, fast gallery that operates without JS libraries, supporting keyboard navigation, mobile swipes, and deep linking to specific slides.

This component leverages the native browser feature scroll-behavior: smooth to create a fluid scrolling animation between sections. This is triggered by anchor links, providing a simple and performant way to build a slideshow without any complex JavaScript animation libraries.

A demonstration of the new CSS Scroll-Driven Animations (SDA) API, where the scroll position of the entire page directly drives a complex, scaling, and rotating grid of images, achieving a high-performance, engaging visual effect purely with CSS.

A showcase of the creative application of clip-path to create an “unfolding” image effect on hover, where the interaction not only changes the shape but also uses z-index to elevate the element and overlap neighboring tiles.

A stunning CSS-only 3D parallax navigation with a “fisheye” hover effect, achieved using transform-style: preserve-3d and a translateZ function tied to cursor position. The core mechanism is the mathematical calculation of CSS variables.

Progressive Blur for the lower screen half is implemented to simulate fog: the effect is created by layering multiple elements with varying backdrop-filter: blur() values, precisely masked using mask: linear-gradient().

This demo creates a responsive hexagonal grid using CSS Grid and the powerful, lesser-known corner-shape: bevel property. It uses negative margin-block for smooth overlaps, and a unique linear() easing function for a bouncy, fluid hover animation.

A truly modern image flow powered by CSS Scroll-driven Animations and view-timeline. This demo uses pure CSS to create a 3D perspective effect where images pop out and rotate as they enter the viewport, with no JavaScript required.

A simple, yet effective image gallery using CSS Grid and native browser features like scroll-snap and :target. This approach creates a smooth, fully accessible slideshow without any JavaScript, relying on pure CSS for both layout and navigation.

CSS Grid creates a 3‑column base, then each image is individually shifted with translate to break the alignment — resulting in a scattered, organic layout. The wave‑shaped border is drawn using mask with repeating radial gradients; the design is purely visual and static.

A responsive mosaic grid of user avatars utilizing CSS Grid’s dense auto-flow algorithm to seamlessly pack items of varying sizes. Special ‘gold’ supporters span multiple rows and columns, creating visual hierarchy, while :has() pseudo-class selectors enable a focused hover state that subtly dims non-active elements.

Radio buttons hidden behind thumbnails control a rotating circular menu — each selection rotates the container so the chosen item aligns at the front. Custom properties handle positioning and animation delays; :has() and sibling selectors manage the interactions. The gallery is fully functional with no JavaScript.

A sophisticated 3D circular gallery powered by native Scroll-Driven Animations. It calculates item positions along a cylinder using calc() and trigonometric functions, while @property variables (--k, --ang) manage layout state. A tiny JavaScript helper synchronizes the scroll position, enabling a fluid, infinite rotary motion as the user navigates the page. High-end, programmatic styling.

A fluid masonry-style gallery engineered with CSS Grid and container queries. It dynamically toggles caption visibility based on card width (@container figure) and employs grid-auto-flow: dense for optimal space utilization. Images scale smoothly on hover, and the overall layout shifts automatically between standard and spanned grid cells depending on the viewport size. Truly robust, modular, and JS-free.

A flex‑based image accordion: hovering a card expands it, the title rotates from vertical to horizontal and changes background colour. All animations use CSS transitions and transforms — no JavaScript. The code is minimal and easy to read.

The gallery uses a flex container: items share equal width, hovering one expands it while others shrink. Background images are set via CSS; animation is a smooth flex transition. Code is concise, with no extra wrappers or JavaScript.

A fluid, responsive gallery that automatically adjusts to screen size and provides rich visual feedback on hover.

This interactive CSS-only image gallery showcases custom hover reveals. Each tile stacks a color image over a grayscale base. By mapping inline CSS variables (--clip-start and --clip-end) to the clip-path property, the top image smoothly morphs between shapes — like polygons, circles, and ellipses — when hovered.