SVG to CSS Mask Generator

Paste a shape from Figma and get the HTML and CSS that mask any image to it. Free, and it runs in your browser.

How to use it

In Figma, select one shape, right-click and choose Copy/Paste as → Copy as SVG. Paste it into the box above. Pick a sample image or upload your own to see the result, then copy the SVG, HTML and CSS into your site.

The converter reads one path. If your shape is made of several layers, flatten or union it in Figma first.

Why a CSS mask

The shape is converted to relative coordinates (0 to 1), so the mask scales with the image at any size. No extra image files, no Photoshop.

Unlike a clip-path polygon, curves stay exactly as you drew them, and unlike clip-path: path() it stays responsive.

Is it private

Yes. Everything happens in your browser. Your SVG code and images are never uploaded to a server.

The converter is open source. View the code on GitHub.

Watch how it works

More free tools

Variable font converter: convert variable TTF fonts to WOFF2 in your browser.
Winden Tokens: free Figma plugin for design tokens.