Free nail salon 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: glaze.md, data: glaze.json

Nail salon website template: first screen on a phone

About this nail salon website template

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.

At a glance, October 2026. 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.

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 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.

Good for:

Nail salon or gel nail studioBeauty salon, lash or brow studioBarbershop, hairdresser or spa with a price list and a membershipAny small appointment business that wants a soft, glassy look

Turn the nail salon 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/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

Prompt for the agent:

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.

In a terminal

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.

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.

Nail salon website design and motion

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.

Every value of this nail salon 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 nail salon website page

Navigation
Glass top bar: Glaze wordmark with a nail studio line, five section links, menu button on phones; hides on scroll down
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
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
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
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
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
A photo of a nail artist at work with four smoked glass sheets laid over its edge (demo: Prep, Base, Colour, Seal)
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
A photo of the waiting corner in a sticky frame beside three glass notes (demo: The sofa, The side table, The long window)
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
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)
An orb behind the heading drifts up into place and a band of light sweeps once across each artist strip.
Your file is yours
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)
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
One light glass price sheet with three groups, Hands, Feet and Extras, over orbs and a ring
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
A membership card that turns over: front with price, back with five perks (demo: £39 a month)
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
Five questions and answers as native <details> rows on light glass, with an orb behind and a sticky heading
An orb settles behind the rows as the section scrolls in, and each row opens and closes natively.
Book a chair
One peach glass pane with address, hours, phone, email and a booking request form, over an orb, a ring and a dot
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
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
The wordmark rises up out of a mask as the footer arrives.

Before you publish the nail salon website site

Replace social preview image, favicon, phone number, email address, contact form (sends nothing yet) and social media links and the invented demo facts (prices, dates, addresses). AGENTS.md lists them.
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.

Questions about this nail salon website template

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, 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.

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 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.

Not a nail salon website? More free templates