Free art gallery website template

Live demo Download ZIP Build without code GitHub

Edit it by hand: it is one index.html with no build step, so you can open it in any text editor, change the words and photos, and upload it to any static host. Not a coder? Describe your business in one sentence to 8B's AI website builder and it designs a new site for you, with more pages when you need them. Designing is free; publishing with hosting is $9 a month, billed yearly. It also works inside Claude and ChatGPT.

MIT license · Made by 8B, an AI website builder · Plain text: nocturna.md, data: nocturna.json

Art gallery website template: first screen on a phone

About this art gallery website template

This art gallery website template is one free HTML file for a gallery, kunsthalle or museum that opens late: an opening screen, a six-night programme, four rooms, five resident artists, a midnight screening, passes and a visit form. White ruled cells meet dark night screens and a coral glow. AGENTS.md is included, so an AI agent can adapt it.

At a glance, October 2026. One 105 KB index.html with its CSS and JavaScript inside, 12 sections, 19 Unsplash photos credited in CREDITS.md, Host Grotesk and Pliant from Google Fonts, GSAP 3.13.0 (ScrollTrigger); Lenis 1.3.27 smooth scroll loaded from jsDelivr.

It suits an art gallery with a changing season, a kunsthalle, a small museum that opens late, a cinema or a performance space. Searches for art gallery website design and museum web design usually want the same things: dates, rooms and tickets in one scroll. Here that is an event ledger, a room plan, artist names, a screening section and three passes, in a free template for art gallery sites.

Claude Code, Cursor or Codex can adapt this by vibe coding in a few passes. Start with the name, hours, address and the six programme rows, then the four rooms, five artists and the screening. Ask the owner for every date, price, artist name, film title and house rule; the demo invents all of them. Leave the ids, the script classes and the data-8b attributes AGENTS.md lists alone, and reset the --len number on the wordmark, the rails and the artist names when their text changes.

This is the right base when a venue keeps late hours, runs dated events and sells passes. A venue built around one dated event fits a template made for events better, and a gallery with hundreds of works or a shop needs more than one page. One weak spot: without JavaScript the Menu button cannot open its overlay, and on phones that overlay holds the only Residents and Midnight screening links. Owners who do not want to edit code can use a no-code builder instead.

Good for:

Art gallery or kunsthalle with a changing programmeMuseum, art centre or cultural venue with late openingsCinema, performance space or festival with a season of eventsAny venue with rooms, resident artists and tiered passes, by its ruled hairline look

Turn the art gallery website template into your site with an AI agent

With an AI coding agent

Files (PowerShell: curl.exe):

curl -LO https://raw.githubusercontent.com/8bsite/art-gallery-website-template/main/index.html
curl -LO https://raw.githubusercontent.com/8bsite/art-gallery-website-template/main/AGENTS.md
curl -LO https://raw.githubusercontent.com/8bsite/art-gallery-website-template/main/LICENSE
curl -LO https://raw.githubusercontent.com/8bsite/art-gallery-website-template/main/CREDITS.md

Prompt for the agent:

Read AGENTS.md, then edit index.html. Make this the site for <my venue: name, address, opening hours, rooms, season events with dates, resident artists, any screening, ticket and pass prices>. Replace first the name, hours, six programme rows, five artists, prices and the Rotterdam address. Keep the section ids and the classes AGENTS.md lists, set each --len to its text length, and keep four rooms, eight relay cities and three pass cards. Ask me for missing facts and never invent dates, prices, artists or contacts.

In a terminal

npx degit 8bsite/art-gallery-website-template my-site

Art gallery website design and motion

Palette

#ffffff page ground of the light sections, text on the dark screens and footer, the Buy a ticket card#101014 text and hairlines on light sections, the dark night screens, the footer and filled buttons#c6ddf7 the light-blue journal section, the dawn disc behind the contact form, the round Get a pass button and the Patron card#f0654a coral accent: the glow, the dot, the room lamp, the relay line, button hover fills and the Night Pass card#5a5b64 secondary body text and captions on light sections#a9abb6 small secondary text on the dark screens, the menu overlay and the footer: room captions, the screening synopsis, the footer columns

Fonts

Pliant: headings and the vertical rails, a variable font from weight 200 to 900 that pairs a light line with a heavy one; card and cell titles at weight 600
Host Grotesk: body text, labels, form fields and buttons, in weights 400 to 600; labels and buttons are small uppercase with wide spacing

A hairline grid divides each section. On a desktop a left column about a third wide holds the label, with the content to its right; the opening and FAQ add a narrow rail of rotated type. Sections mostly alternate white and near black, with one light-blue journal. The programme, artists and passes read as ruled rows or cards, the screening is a three by three credits grid around the still, and the relay is a row of eight cells.

The programme window, the artist portraits and the journal feature photo sit in arch shapes, and the stars, discs and glow are CSS and SVG, not images. Section headings pair a light line with a heavy one, and the artists' names swap weights as you scroll.

Every value of this art gallery website design, with the type scale, spacing and the motion rules, is in its DESIGN.md file (Google's format), ready for a coding agent or Stitch.

What is on the art gallery website page

Navigation
White top bar over the right two thirds: arch logo, coral dot, four links, Menu button; Menu opens a dark overlay with seven links; the bar hides on scroll down
The bar hides when you scroll down past half a screen and returns on scroll up; Menu opens a dark overlay of seven links.
Lights down at nine. Eyes open till two.
Dark screen with the heading "Lights down at nine. Eyes open till two.", intro, Get a pass button, See the season link, three fact cells and five stars
On load the heading lines, text and three fact cells rise in one after another. The glow breathes and the five stars turn slowly, and both pause while the section is off screen.
Six nights to stay up for
Ledger of six nights with dates, titles, formats and rooms, beside a sticky arch window that shows a photo per night
As each row reaches the reading line its photo rises into the arch over the previous one, and on desktop a coral dot slides down the rule to that row.
Four rooms, one long night
Dark stage with the heading "Four rooms, one long night", a Plan a visit button and a plan of four rooms that a coral lamp walks through
Pinned: each room starts under a dark veil, a coral lamp travels from room to room, and each veil lifts as the lamp arrives.
Five artists who work at night
Five resident artists as huge two-weight names with a role line and an arch portrait each
As each row crosses the screen the light first name thickens while the heavy surname thins, they trade back, and the portrait slides along the row.
Head lights
3x3 ruled credits grid with a film still in the middle that opens to the full screen
Pinned: the still opens from the middle cell to the full screen, the other cells slide off the edges and the title travels down onto the picture.
One film, eight midnights
One row of eight city cells in midnight order that a coral line sweeps across, each turning dark
A coral line sweeps across the row of cities, and each cell fills with night as the line passes.
Close your eyes
Light-blue section: one featured note in a big arch, two short notes with round photos, a row of five stars
The heading rises, the arch photo opens upward, the two notes draw their hairlines and the five stars turn with scroll.
One evening, or every one
Three passes with price, three included items and a button each: One Night, Night Pass, Patron
The three cards start stacked and slightly turned, then fan out into a row as you scroll.
Questions for the night
Vertical rail "Before you come", an intro with three stars and five questions that open and close
A hairline draws in below each question and the three stars turn with scroll.
Come late. Stay later.
Four info cells, the heading "Come late. Stay later." and a form with name, email and question, over a light-blue dawn disc
A large light-blue disc rises from below and grows behind the heading and form as you scroll.
Footer
Dark footer with the wordmark filling the width and four ruled columns

Before you publish the art gallery website site

Replace social preview image, favicon, email address, phone number, contact form (sends nothing yet) and social media links and the invented demo facts (prices, dates, addresses). AGENTS.md lists them.
Get a pass button in the opening lead to #pass now; point them to your ticket or membership shop, or keep #pass.
See the season link in the opening lead to #programme now; point them to keep it, or your full programme page.
Details link in the first programme row, and the Book a seat button in the screening lead to #screening and #pass now; point them to your event page and your ticket page for the screening.
Book links in the other five programme rows lead to #pass now; point them to the ticket page of each event.
Plan a visit button in the rooms section lead to #contact now; point them to your visitor information page, or keep #contact.
Buy a ticket, Join and Become a patron buttons on the three pass cards lead to #contact now; point them to your ticket shop, membership signup and patron signup pages.
Ask for the note and Ask for it links in the journal lead to #contact now; point them to the article pages, or keep #contact if the notes are sent on request.
Instagram link in the footer lead to https://www.instagram.com/ (the Instagram home page) now; point them to your Instagram profile.
Newsletter link in the footer lead to a mailto: link to the contact email with the subject Newsletter now; point them to your newsletter signup page.
The contact form does not send anything: it only shows the thank-you line. Connect Formspree, Netlify Forms or your own endpoint, or replace it with a link.
The rooms and screening scenes pin their section for the length of the scroll; on short screens or in landscape on phones the room captions and the credits grid are tight.
The relay city text passes through a mid-grey for a moment while the night fills its cell.

Questions about this art gallery website template

Is this one of the free website templates for art gallery sites, and can I use it for a client?

Yes. It is one index.html under the MIT license, so you can adapt it for your own venue or a client at no cost. GSAP, ScrollTrigger and Lenis load from jsDelivr, there is no build step, and CREDITS.md lists the Unsplash photos.

Can a museum or a daytime gallery use it?

Yes, after a text pass. A museum website design can keep the rooms, programme and passes, but the demo copy is built around night hours: nine to two, free entry before 22:00 and a Friday midnight screening. Replace those, or remove the screening and relay sections with their animation scripts and repoint the links to #screening.

Where does the visit form send its messages?

Nowhere yet. The form needs a name, an email and a question, then shows a thank-you line and clears itself without sending anything. Connect Formspree or Netlify Forms with the steps in AGENTS.md, or replace the form with a link, and rewrite the thank-you line.

How do I give it to Claude Code, Cursor or Codex?

Download index.html and AGENTS.md with the curl lines near the start of AGENTS.md, put them in an empty folder and tell the agent to read AGENTS.md first. Give it the files, not the page address, because a link comes back as a summary. Then paste the prompt from this page with your venue's facts.

What must I keep when I change the text?

Keep the ids, the data-8b-section, data-8b-motion and data-8b-part attributes and the classes AGENTS.md lists. Keep four rooms, eight relay cities and three pass cards, and reset each --len. Keep the header comment before the html tag, the 8B meta tag and the Design: 8B footer link unless the site owner asks to remove it.

Can I get a site like this without editing code?

Yes, in a different way. 8B's AI website builder designs a new site from a sentence, with its own design, not this template. Designing and restyling are free; publishing with hosting and SSL, HTML export and AI edits in chat are on Pro at $9 a month billed yearly. It also runs inside Claude and ChatGPT through the 8B connector.

Not a art gallery website? More free templates