For bloggers, salons and beauty sites

Free hair & face tools for your website

Free for any website. Copy the code, paste it into your page.

Face Shape Detector

Find your face shape and three haircuts to try.

Embed code

<iframe src="https://hairstyleatlas.com/embed/face-shape-detector" data-hairstyleatlas title="Face Shape Detector" width="100%" height="720" style="border:0;max-width:720px" loading="lazy" allow="camera"></iframe>
<p style="font-size:14px">Free <a href="https://hairstyleatlas.com/tools/face-shape-detector">face shape detector</a> by HairstyleAtlas</p>
<script async src="https://hairstyleatlas.com/embed.js"></script>

1. Copy the code
2. Paste into an HTML or Embed blockWordPress, Webflow, Wix, Squarespace, Shopify
3. Publish

Preview

Cite this tool

HTML citation

<a href="https://hairstyleatlas.com/tools/face-shape-detector">face shape detector</a> by HairstyleAtlas

Plain-text citation

Face Shape Detector. HairstyleAtlas. https://hairstyleatlas.com/tools/face-shape-detector

Eyebrow Shape for Your Face

Find a brow shape that works with your natural features.

Embed code

<iframe src="https://hairstyleatlas.com/embed/eyebrow-shape-for-face" data-hairstyleatlas title="Eyebrow Shape for Your Face" width="100%" height="720" style="border:0;max-width:720px" loading="lazy" allow="camera"></iframe>
<p style="font-size:14px">Free <a href="https://hairstyleatlas.com/tools/eyebrow-shape-for-face">eyebrow shape for face</a> by HairstyleAtlas</p>
<script async src="https://hairstyleatlas.com/embed.js"></script>

1. Copy the code
2. Paste into an HTML or Embed blockWordPress, Webflow, Wix, Squarespace, Shopify
3. Publish

Preview

Cite this tool

HTML citation

<a href="https://hairstyleatlas.com/tools/eyebrow-shape-for-face">eyebrow shape for face</a> by HairstyleAtlas

Plain-text citation

Eyebrow Shape for Your Face. HairstyleAtlas. https://hairstyleatlas.com/tools/eyebrow-shape-for-face

Glasses for Your Face Shape

Try different frames and find a shape you love.

Embed code

<iframe src="https://hairstyleatlas.com/embed/glasses-for-face-shape" data-hairstyleatlas title="Glasses for Your Face Shape" width="100%" height="720" style="border:0;max-width:720px" loading="lazy" allow="camera"></iframe>
<p style="font-size:14px">Free <a href="https://hairstyleatlas.com/tools/glasses-for-face-shape">glasses for face shape</a> by HairstyleAtlas</p>
<script async src="https://hairstyleatlas.com/embed.js"></script>

1. Copy the code
2. Paste into an HTML or Embed blockWordPress, Webflow, Wix, Squarespace, Shopify
3. Publish

Preview

Cite this tool

HTML citation

<a href="https://hairstyleatlas.com/tools/glasses-for-face-shape">glasses for face shape</a> by HairstyleAtlas

Plain-text citation

Glasses for Your Face Shape. HairstyleAtlas. https://hairstyleatlas.com/tools/glasses-for-face-shape

Beard Filter

See how a different beard looks on you.

Embed code

<iframe src="https://hairstyleatlas.com/embed/beard-filter" data-hairstyleatlas title="Beard Filter" width="100%" height="720" style="border:0;max-width:720px" loading="lazy" allow="camera"></iframe>
<p style="font-size:14px">Free <a href="https://hairstyleatlas.com/tools/beard-filter">beard filter</a> by HairstyleAtlas</p>
<script async src="https://hairstyleatlas.com/embed.js"></script>

1. Copy the code
2. Paste into an HTML or Embed blockWordPress, Webflow, Wix, Squarespace, Shopify
3. Publish

Preview

Cite this tool

HTML citation

<a href="https://hairstyleatlas.com/tools/beard-filter">beard filter</a> by HairstyleAtlas

Plain-text citation

Beard Filter. HairstyleAtlas. https://hairstyleatlas.com/tools/beard-filter

Beard Styles for Your Face Shape

Find beard styles that suit your face.

Embed code

<iframe src="https://hairstyleatlas.com/embed/beard-styles-for-face-shape" data-hairstyleatlas title="Beard Styles for Your Face Shape" width="100%" height="720" style="border:0;max-width:720px" loading="lazy" allow="camera"></iframe>
<p style="font-size:14px">Free <a href="https://hairstyleatlas.com/tools/beard-styles-for-face-shape">beard styles for face shape</a> by HairstyleAtlas</p>
<script async src="https://hairstyleatlas.com/embed.js"></script>

1. Copy the code
2. Paste into an HTML or Embed blockWordPress, Webflow, Wix, Squarespace, Shopify
3. Publish

Preview

Cite this tool

HTML citation

<a href="https://hairstyleatlas.com/tools/beard-styles-for-face-shape">beard styles for face shape</a> by HairstyleAtlas

Plain-text citation

Beard Styles for Your Face Shape. HairstyleAtlas. https://hairstyleatlas.com/tools/beard-styles-for-face-shape

Hairline Self-Check

Get to know your hairline and explore your styling options.

Embed code

<iframe src="https://hairstyleatlas.com/embed/hairline-test" data-hairstyleatlas title="Hairline Self-Check" width="100%" height="720" style="border:0;max-width:720px" loading="lazy" allow="camera"></iframe>
<p style="font-size:14px">Free <a href="https://hairstyleatlas.com/tools/hairline-test">hairline test</a> by HairstyleAtlas</p>
<script async src="https://hairstyleatlas.com/embed.js"></script>

1. Copy the code
2. Paste into an HTML or Embed blockWordPress, Webflow, Wix, Squarespace, Shopify
3. Publish

Preview

Cite this tool

HTML citation

<a href="https://hairstyleatlas.com/tools/hairline-test">hairline test</a> by HairstyleAtlas

Plain-text citation

Hairline Self-Check. HairstyleAtlas. https://hairstyleatlas.com/tools/hairline-test

Skin Undertone Test

Answer a few questions to find colors that complement your skin.

Embed code

<iframe src="https://hairstyleatlas.com/embed/skin-undertone-test" data-hairstyleatlas title="Skin Undertone Test" width="100%" height="720" style="border:0;max-width:720px" loading="lazy" allow="camera"></iframe>
<p style="font-size:14px">Free <a href="https://hairstyleatlas.com/tools/skin-undertone-test">skin undertone test</a> by HairstyleAtlas</p>
<script async src="https://hairstyleatlas.com/embed.js"></script>

1. Copy the code
2. Paste into an HTML or Embed blockWordPress, Webflow, Wix, Squarespace, Shopify
3. Publish

Preview

Cite this tool

HTML citation

<a href="https://hairstyleatlas.com/tools/skin-undertone-test">skin undertone test</a> by HairstyleAtlas

Plain-text citation

Skin Undertone Test. HairstyleAtlas. https://hairstyleatlas.com/tools/skin-undertone-test

Haircut Quiz

Find three haircuts that fit your face, hair and everyday routine.

Embed code

<iframe src="https://hairstyleatlas.com/embed/haircut-quiz" data-hairstyleatlas title="Haircut Quiz" width="100%" height="720" style="border:0;max-width:720px" loading="lazy" allow="camera"></iframe>
<p style="font-size:14px">Free <a href="https://hairstyleatlas.com/tools/haircut-quiz">haircut quiz</a> by HairstyleAtlas</p>
<script async src="https://hairstyleatlas.com/embed.js"></script>

1. Copy the code
2. Paste into an HTML or Embed blockWordPress, Webflow, Wix, Squarespace, Shopify
3. Publish

Preview

Cite this tool

HTML citation

<a href="https://hairstyleatlas.com/tools/haircut-quiz">haircut quiz</a> by HairstyleAtlas

Plain-text citation

Haircut Quiz. HairstyleAtlas. https://hairstyleatlas.com/tools/haircut-quiz

Hair Color Quiz

Find hair colors that suit your features and your routine.

Embed code

<iframe src="https://hairstyleatlas.com/embed/hair-color-quiz" data-hairstyleatlas title="Hair Color Quiz" width="100%" height="720" style="border:0;max-width:720px" loading="lazy" allow="camera"></iframe>
<p style="font-size:14px">Free <a href="https://hairstyleatlas.com/tools/hair-color-quiz">hair color quiz</a> by HairstyleAtlas</p>
<script async src="https://hairstyleatlas.com/embed.js"></script>

1. Copy the code
2. Paste into an HTML or Embed blockWordPress, Webflow, Wix, Squarespace, Shopify
3. Publish

Preview

Cite this tool

HTML citation

<a href="https://hairstyleatlas.com/tools/hair-color-quiz">hair color quiz</a> by HairstyleAtlas

Plain-text citation

Hair Color Quiz. HairstyleAtlas. https://hairstyleatlas.com/tools/hair-color-quiz

Haircut Identifier

Describe a haircut and find out what to ask your barber for.

Embed code

<iframe src="https://hairstyleatlas.com/embed/haircut-identifier" data-hairstyleatlas title="Haircut Identifier" width="100%" height="720" style="border:0;max-width:720px" loading="lazy" allow="camera"></iframe>
<p style="font-size:14px">Free <a href="https://hairstyleatlas.com/tools/haircut-identifier">what is this haircut called</a> by HairstyleAtlas</p>
<script async src="https://hairstyleatlas.com/embed.js"></script>

1. Copy the code
2. Paste into an HTML or Embed blockWordPress, Webflow, Wix, Squarespace, Shopify
3. Publish

Preview

Cite this tool

HTML citation

<a href="https://hairstyleatlas.com/tools/haircut-identifier">what is this haircut called</a> by HairstyleAtlas

Plain-text citation

Haircut Identifier. HairstyleAtlas. https://hairstyleatlas.com/tools/haircut-identifier

Questions about embedding

Straight answers before you upload a photo.

Is it free?

Yes. These ten browser tools are free forever to use and embed, with no signup. Our separate hairstyle try-on service has its own account and credit flow.

Do I need to credit you?

Please keep the plain HTML credit link below the iframe. It helps readers find the original tool and supports our work. A link inside the iframe does not replace the credit on your page.

Can I change the look?

The tool fits the width of your page automatically. Open Preview to see how it looks.

Does it slow my page?

The iframe is lazy-loaded. Photo tools show a stored sample without downloading the face model on page load; that model loads only after a visitor chooses a photo or opens the camera. The optional resize script is under 2 KB. Any embed still adds some page weight.

What happens to my visitors’ photos?

The free tool processes photos inside the visitor’s browser and does not send the photo or landmarks to our server. Sharing excludes the photo by default; visitors can choose to include it. Analytics can record tool use and the referring site, but not the image.

Have a different partnership in mind?

Tell us what your readers need. Contact us about a custom partnership.