What's the difference between Personal and Studio?

Personal ($39) is for one person — unlimited use on one active device at a time. Activate on a new device and the old one signs out. Studio ($199) is for teams and commercial client work — unlimited team members, early access to new tools, and a commercial license.

Do I need an account?

No. Use any tool free up to 5 times per day on compute-heavier tools, and unlimited on lightweight ones. No card, no account, no signup required.

Where are my files processed?

Right on your device. Files never upload to any server. Everything runs in your browser — you can verify in DevTools → Network.

What happens if I use my Personal license on a second device?

The new device activates and the old device signs out. Your license key stays the same — you just move it between devices as needed. No limit on how often you switch.

Does this work on my phone?

Yes. Every tool works on iPhone, Android, tablet, and desktop.

What if I want a refund?

30-day money-back guarantee on both tiers. No questions asked. Email sales@cipherforces.com.

Will you add more tools?

Yes. New tools ship regularly. Your license includes every tool we ever release — Studio members get early access.

DevFreeBy Daniel BeglaryanUpdated August 2026

Clip-Path Generator

Draw a shape, drag the points, and copy the CSS clip-path.

PrivateWorks OfflineNo Account

Shape

Points (6)

Click a point to select it, then drag or use the arrow keys. Double-click a point to remove it, or empty space to add one.

Preview

CSS

-webkit-

-webkit-clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);

Value only

polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%)

Tailwind arbitrary value

[clip-path:polygon(25%_0%,_75%_0%,_100%_50%,_75%_100%,_25%_100%,_0%_50%)]

Preset shapes

Deep dive

About Clip-Path Generator.

Draw a Shape, Copy the clip-path

The CSS clip-path property crops an element to any outline you like — a hexagon, a circle, an arrow, a chat bubble — but writing the coordinate list by hand is tedious and easy to get wrong. This editor lets you drag the points and handles right on a live preview and reads back the exact clip-path value, ready to paste into your stylesheet.

Everything runs in your browser. Pick a shape type — polygon, circle, ellipse, or inset — or start from a preset, then drag the vertices while the CSS updates as you go. The preview box is square on purpose: every percentage in the output lines up one-to-one with what you see, so the shape you drag is the shape you ship. You can even drop in your own image to check the crop against real content — the image never leaves your device.

Copy the value on its own, a full clip-path declaration (with an optional -webkit- prefix for older Safari and iOS), or a Tailwind arbitrary-value class.

What you can build

Angled section dividers: Slice the top or bottom off a hero band with an inset or polygon so two sections meet on a clean diagonal.
Decorative image crops: Frame avatars as circles, product shots as hexagons, or feature images as arrows and chevrons.
Chat and callout bubbles: Start from the Message preset to get a speech-bubble tail without adding an extra element.
Badges and stickers: Stars, plus signs, and bevelled corners for labels, tags, and price flags.
Reveal and hover animations: Grab a clean value to animate clip-path between two shapes on scroll or hover.
Custom buttons and cards: Notch a corner or point one edge to give a component a distinctive silhouette.

One honest caveat: a clip-path shape is a single outline, so it can't cut holes — a picture-frame or donut needs an SVG mask instead — and very old browsers ignore clip-path entirely, so keep the layout usable when it's missing.

Privacy: This tool runs entirely in your browser. Your shapes and any image you preview against are never uploaded — nothing is sent to a server, and there is no sign-up.

Three steps