# Free nail salon website template

> Free HTML nail salon website template for gel studios and beauty salons, with a price sheet and booking form. AGENTS.md for Claude Code, or no code with 8B. Made by 8B (https://8b.com/), an AI website builder. Updated October 2026.

This nail salon website template is one free HTML file for a gel studio or beauty salon whose clients book a chair. It has finish prices, a four-layer process, four artists, a price sheet, a club card and a booking form, all in frosted glass over orange orbs. AGENTS.md is included, so Claude Code, Cursor or Codex can adapt it.

- Page: https://8b.com/templates/glaze/
- Live demo: https://8b.com/templates/glaze/demo.html
- DESIGN.md (design tokens and motion rules): https://8b.com/templates/glaze/DESIGN.md
- Repository (GitHub template): https://github.com/8bsite/nail-salon-website-template
- Download ZIP: https://8b.com/templates/glaze/nail-salon-website-template.zip
- Template name in the repository: Glaze
- At a glance: One 93 KB index.html with its CSS and JavaScript inside, 12 sections, 14 Unsplash photos credited in CREDITS.md, Gabarito and Onest from Google Fonts, GSAP 3.13.0 (ScrollTrigger, SplitText); Lenis 1.3.27 smooth scroll loaded from jsDelivr.

## Use it with an AI coding agent

Download the files into the project (Windows PowerShell: `curl.exe`):

```bash
curl -LO https://raw.githubusercontent.com/8bsite/nail-salon-website-template/main/index.html
curl -LO https://raw.githubusercontent.com/8bsite/nail-salon-website-template/main/AGENTS.md
curl -LO https://raw.githubusercontent.com/8bsite/nail-salon-website-template/main/LICENSE
curl -LO https://raw.githubusercontent.com/8bsite/nail-salon-website-template/main/CREDITS.md
```

Then give the agent this prompt:

```text
Read AGENTS.md, then edit index.html. Make this the site for <my salon: name, address, opening hours, finishes or services with prices, artists with specialties and working days, any membership, how people book, phone and email>. Replace first the studio name, the six finishes, the 14 price rows, the artists, the hours and the 14 photos. Keep the section ids, the classes AGENTS.md lists and the footer wordmark's --len at the new name's letter count. Ask me for missing facts and never invent prices, hours, addresses or contacts.
```

Work on the downloaded file, not on a link. AGENTS.md lists what to keep and what to replace. Or copy the whole repository: `npx degit 8bsite/nail-salon-website-template my-site`.

### Nail salon website design prompt for any AI tool

Use this prompt to build a nail salon site from scratch in Claude Code, Codex, Cursor, Lovable, v0 or Bolt, or to brief a designer. It writes this template's design as decisions, against the stock look of generated sites. With the template files, the shorter prompt above is enough.

```text
Build a one-page website for a small gel nail studio, for clients who pick a finish, meet an artist and book a chair. Use plain HTML, CSS and JavaScript in one file, with GSAP ScrollTrigger and Lenis for motion.

Sections in order: opening, six finishes with from prices, a four-layer process, the room, the artists, care notes, a price sheet, a membership card, questions, a booking form, footer.

Type: Gabarito 600 and 700 in uppercase for headings, labels and buttons; Onest 400 and 500 for body text and prices.

Colours: #f2671f orange, only for orbs, rings and hover fills; #ffc49b peach panes; #62504c taupe page ground; #bcb0a9 sand bands; #23171a near black for text and the main button; #fbf5f0 cream text on dark.

Look: frosted translucent glass panes over soft orange orbs, square 5 px corners, panes overlapping photos and stepping sideways. No purple gradient, no row of three icon cards, no centred hero with two buttons, no opaque white cards.

Motion: one idea, glass sliding over light. Orbs drift, one scene pins while finishes run sideways. Switch all of it off for prefers-reduced-motion.

Copy: short and concrete. Ask me for prices, artists and their days, address, hours and phone, and never invent them; mark placeholders. One primary action, Book a chair, repeated in the opening and leading to the form; the membership is joined at the visit.

Phone: check at 390 px, tap targets at least 44 px, visible keyboard focus. Finish with no console errors and a list of every placeholder.
```

## About

Owners who search for a website for nail salon work tend to need the same page: finishes with from prices, a full price list, the artists and the days they work, a membership and a way to ask for a chair. This page holds all of it, so a gel studio, a solo manicurist who wants a nail tech website template, or a small beauty salon can swap in its own services and keep the structure.

Vibe coding this in Claude Code or Cursor starts with facts only the salon has: prices, the artists and their days, address, hours, phone and what the club includes. The demo invents all of it, including the seven-day repair promise, and its footer hours disagree with the Visit hours, so set one version. Replace the 14 Unsplash photos, set the footer wordmark's --len to the new name's letters, and after changing the number of finish cards or layer sheets, scroll through to check the pin lengths.

It suits a studio that sells finishes from a price list and wants clients to meet the artists and join a membership. Among beauty salon website templates, a salon that mostly cuts and colours hair fits the [hair salon](https://8b.com/templates/undertone/) template better. A business with many service pages or online payment needs more pages. The weak spot is booking: the buttons only jump to a form that sends nothing until it is connected, and there is no calendar. Without code, 8B's builder is the other route.

## Design

- Palette: #a6968f (light taupe at the upper end of the booking section's background gradient), #62504c (page background, the ground of the finishes, artists and club sections, and the bottom of the booking gradient), #fbf5f0 (text on dark sections, the pale glass edges and borders, button text on the near black fill), #23171a (near black: the layers and footer backgrounds, text on light sections, the filled Request a time button), #f2671f (orange of the opening ground, the orbs and rings, the button hover fill, the number discs in the care notes as they pass and the favicon), #ffc49b (peach: the top of the opening ground, the care section's ground, finish prices, small labels on dark glass, the light end of the orb gradients and the tint of the peach panes), #98320c (deep ember: the dark end of the orb and ring gradients and the care note titles as they pass the middle of the screen), #bcb0a9 (sand: the ground of the studio, prices and questions sections)
- Fonts: Gabarito (weights 600 and 700: uppercase headings, the wordmark, card titles, the finish and club prices, tracked small labels and button text), Onest (weights 400 and 500: body text, form fields, text links and the figures of the price sheet)

Frosted glass panes sit over orange orbs and rings, over a peach to orange opening, then bands of taupe, sand, peach and near black. Headings are heavy uppercase type, and corners are a square 5 px. Panes overlap their photos and step sideways: the four layer sheets are staggered by a few vw, the artist strips alternate left and right, and the price sheet is pushed to the right edge. The footer opens with a wordmark filling the width.

Smoked, light and peach glass panes share one pale upper edge, and a band of light sweeps once across the artist strips, the layer sheets and the price sheet. Buttons fill with an orange orb on hover. On phones the layer sheets land one by one as they scroll in.

## Sections and motion

- **Navigation** (navigation): glass top bar: Glaze wordmark with a nail studio line, five section links, menu button on phones; hides on scroll down. Motion: The nav bar sits at the top of the opening with dark text, floats as a glass bar after 24 px of scrolling, hides on scroll down and returns on scroll up.
- **Layers, not coats** (opening): one screen: a peach glass pane with the heading "Layers, not coats", a paragraph, a Book a chair button and a link, beside a photo of orange gel nails, over floating orbs and rings. Motion: On load the glass pane and the photo rise into place, and the two orbs float and the two rings turn in loops that pause when the field is off screen.
- **Six finishes, one gloss** (finishes): six finishes as cards with photo, name, a line and a from-price (demo: Glass, Chrome, Milk, Bare, Duo, Sculpt), sliding through a window in frosted glass. Motion: The section pins and the six cards run sideways past a clear window between two frosted bands, while the photos drift inside their frames.
- **Built in four layers** (layers): a photo of a nail artist at work with four smoked glass sheets laid over its edge (demo: Prep, Base, Colour, Seal). Motion: On desktop the stage pins for two screens and the four sheets land one by one from below with a band of light, while the photo settles from a larger scale.
- **The room on Example Street** (studio): a photo of the waiting corner in a sticky frame beside three glass notes (demo: The sofa, The side table, The long window). Motion: The photo sits in a sticky frame and zooms and pans to a new spot for each of the three notes, then pulls back to the whole room.
- **Four people, six tables** (artists): four artists as glass strips with name, specialty and working days, each with a photo of their work (demo: Mara Osei, Juno Bell, Ines Varga, Theo Lam). Motion: An orb behind the heading drifts up into place and a band of light sweeps once across each artist strip.
- **Your file is yours** (file): a heading with a photo on a sticky column, and four numbered care notes passing a turning ring (demo: Oil at night, File one way, Gloves at the sink, Back at three weeks). Motion: A ring in the middle of the screen turns one and a half times as the care notes pass, and each note's title turns ember red while its number disc fills orange.
- **Prices** (prices): one light glass price sheet with three groups, Hands, Feet and Extras, over orbs and a ring. Motion: Two orbs and a ring behind the sheet drift into place at different speeds and a band of light sweeps once across the sheet.
- **The three-week club** (club): a membership card that turns over: front with price, back with five perks (demo: £39 a month). Motion: The section pins for about 1.6 screens: the front card rises and faces you, turns edge-on, and the back card turns in with a band of light.
- **Before you come** (faq): five questions and answers as native <details> rows on light glass, with an orb behind and a sticky heading. Motion: An orb settles behind the rows as the section scrolls in, and each row opens and closes natively.
- **Book a chair** (visit): one peach glass pane with address, hours, phone, email and a booking request form, over an orb, a ring and a dot. Motion: As the section scrolls in, the large orb sinks into its corner, the ring rolls in from the right and a small dot rises, while the pane and form stay still.
- **Footer** (footer): dark footer: large wordmark filling the width, studio name with address and hours, section links, phone, email and Instagram, copyright with the Design: 8B credit. Motion: The wordmark rises up out of a mask as the footer arrives.

## Good for

- nail salon or gel nail studio
- beauty salon, lash or brow studio
- barbershop, hairdresser or spa with a price list and a membership
- any small appointment business that wants a soft, glassy look

## Questions

**Can I use this free beauty salon website template for a client?** Yes. It is one index.html under the MIT license, [the whole salon on one page](https://8b.com/templates/one-page/), so a freelancer can ship it to salon clients at no cost. GSAP, ScrollTrigger, SplitText and Lenis load from jsDelivr, with no build step, and the 14 photos are Unsplash images listed in CREDITS.md. Both fonts are Google Fonts under the Open Font License.

**Can a lash studio, hair salon or barbershop use it?** Yes, after a text pass. The finishes, price sheet, artist strips and club card suit any appointment business. The opening, layers, care notes, questions and the Finish list in the form talk about gel nails, so rewrite them or drop the layers section with its script and links. All 14 photos show nails or the nail room.

**Where does the booking form send requests?** Nowhere yet. The form checks that name and phone are filled, shows its thank-you line and clears itself without sending anything. Connect Formspree or Netlify Forms with the steps in AGENTS.md, or point the Book a chair and Join at your visit buttons at your own booking page. There is no calendar and no live availability.

**How do I use this nail salon website template for Claude Code, Cursor or Codex?** Put index.html and AGENTS.md in an empty folder with the curl lines listed in AGENTS.md, and tell the agent to read AGENTS.md first. Give it the files, not the page address. Then paste the prompt above with your salon's facts. Without the files, use the nail salon website design prompt above, which [Lovable turns into its own code](https://8b.com/templates/for-lovable/).

**What breaks if I change the wrong thing?** Keep the section ids, the data-8b-section, data-8b-motion and data-8b-part attributes and the selectors AGENTS.md lists for each script, and set the footer wordmark's --len to the name's letter count. Keep the header comment and the 8B meta tag in the head. Keep the Design: 8B footer link unless the site owner asks to remove it.

**Can I get a salon site like this without editing code?** Not this page, which is an HTML file that a person or an AI agent edits. [8B's AI website builder](https://8b.com/) is the no-code route: describe the salon in a sentence and its engine designs a new site, its own design. Designing is free; publishing with hosting, HTML export and AI edits are on Pro at $9 a month billed yearly.

## Before publishing

Replace: social preview image, favicon, phone number, email address, contact form (sends nothing yet) and social media links, plus the invented demo facts (prices, dates, addresses).

- Book a chair button in the opening and Join at your visit button in the club section lead to #visit, the booking form now; point them to your online booking page, or keep #visit once the form is connected.
- How a set is built link in the opening lead to #layers now; point them to keep, or a page about your process.
- Phone link in the phone menu, phone and email links in the Talk to us line and the footer lead to a tel: link and a mailto: link with placeholder numbers now; point them to your real phone number and email address.
- Instagram link in the footer lead to https://www.instagram.com/ (the home page of Instagram) now; point them to your Instagram profile.
- The footer hours differ from the hours in the Visit section.
- In the finishes scene the frosted bands use backdrop-filter, which is heavy on older phones; five of the six photos are 650 px wide, the Sculpt photo 1140 px.
- The orbs and rings are decorative and cross the edges of the screen on phones by design; text on the club cards and the other glass panes sits on translucent glass, so check contrast after changing colours.
- GSAP, ScrollTrigger, SplitText and Lenis load from a CDN at the end of the body and block rendering for a moment.

## License

Code MIT. Photos: Unsplash License (credits in CREDITS.md). Fonts: SIL Open Font License 1.1. Browsers: Chrome and Edge 111+, Safari 16.2+, Firefox 113+ (it uses color-mix(), cascade layers, small/dynamic viewport units).