- Free
- No sign-up
- Works on any device
No tool matches your search.
- Free
- No sign-up
- Works on any device
Create a QR code for a link, Wi-Fi, WhatsApp, contact and more, or read one from a photo.
- Free
- No sign-up
- Works on any device
Fill in the details to see your QR code.
PNG for phones, chats and websites. SVG and PDF stay sharp at any size, which is best for printing. Tip: point your phone camera at the preview to test it.
3. Style (optional): colors, dots, logo
Choose a photo or screenshot or drag it here
Works with photos of printed codes, screenshots and image files.
Looking for QR codes…
CSS clip-path generator
Drag points to make polygons, circles and shapes, then copy the clip-path CSS.
- Free
- No sign-up
- Works on any device
About CSS clip-path generator
Cut elements into triangles, hexagons, arrows, circles or any custom polygon by dragging points on a preview, then copy the clip-path value. Percent-based coordinates keep the shape responsive. Remember that clipped areas still exist, so shadows and borders get cut off as well.
How to use CSS clip-path generator
- Pick a shape such as polygon or circle.
- Drag the points on the preview to reshape it.
- Copy the clip-path CSS and apply it to your element.
Why use this tool?
- Private: everything happens in your browser. Nothing you enter is uploaded.
- Free, with no sign-up, no watermark and no limit on how often you use it.
- Works on phones, tablets and computers: Android, iPhone, Windows, Mac and Linux. Nothing to install.
- Free to embed on your own website, with a ready-made code to copy.
- Available in 10 languages.
Also known as
Frequently asked questions
Why is my box-shadow cut off with clip-path?
Clip-path trims everything outside the shape, including shadows. Put the shadow on a parent wrapper, using filter: drop-shadow, so it follows the clipped outline.
Can I animate between two clip-path shapes?
Yes, if both shapes use the same function with the same number of points. The browser then moves each point smoothly during a transition.
Does clip-path change the space the element takes?
No. The element keeps its original box in the layout and only the visible area is cut. Clicks outside the visible shape are also ignored.
Is CSS clip-path generator free?
Yes. CSS clip-path generator on Toolipedia is free to use, with no sign-up and no watermark.
Is it safe to use?
Yes. Everything is worked out in your browser, and nothing you enter is sent to our server.
Does it work on my phone?
Yes. It works in any modern browser on Android and iPhone, as well as on tablets and computers. There's nothing to install.
Do I need an account?
No. Just open the page and use the tool. There's no sign-up and no email needed.
Can I put CSS clip-path generator on my own website?
Yes. Use the Embed on your site button under the tool to copy a short piece of code and paste it into your page. It is free, needs no account, and the tool keeps working inside your page.