CSS Clip Path

Preset and custom clip-path shapes with live preview. WebKit prefix, size control, copy or download.

PrivateIn your browserInstantUnlimited

Custom value

Preview size 160px

CSS output

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

Type: polygon · 58 chars

Outputs clip-path and -webkit-clip-path. Custom mode accepts any valid clip-path function string.

Preview

How it works

Choose a preset

Pick circle, hexagon, star, arrow, and other ready-made clip-path shapes.

Or enter custom CSS

Toggle custom mode to paste any clip-path value — polygon, circle, inset, or path().

Copy CSS

Preview over gradients, adjust preview size, then copy or download clip-path.css.

Why use clip-path?

clip-path creates distinctive layouts and avatars without extra image assets — useful for cards and hero sections.

Why use this tool

Ten preset shapes
Custom clip-path input
Live preview with gradients
WebKit prefix included
Adjustable preview size
Unlimited use — no daily cap

Questions

What does CSS Clip Path do?

It generates CSS clip-path rules that visually cut an element into a shape.

Is this a full SVG editor?

No. It offers presets plus a text field for clip-path functions — not Bézier editing.

Why include -webkit-clip-path?

Safari still benefits from the prefixed property for some clip-path uses.

What shapes use polygon()?

Hexagon, diamond, star, arrow, triangle, and message bubble presets use polygon points.

Is my CSS sent to a server?

No. Generation runs entirely in this browser tab.

Is there a daily limit?

No. This generator is unlimited on the free plan.

If Easy24 helped, buy a coffee

Tools stay free in your browser. One-time thanks via Kreosus. Turkish cards work.

Buy a coffee

Similar Developer tools

See all

JSON Formatter

Developer

Pretty-print, minify, validate, and sort JSON keys in the browser. Choose 2- or 4-space indent, import a file, download the result.

Open

Meta Tag Generator

Developer

Build SEO title, description, Open Graph, Twitter Card, and canonical tags with a live social preview. Runs in the browser.

Open

CSS Gradient Generator

Developer

Design linear and radial CSS gradients with up to three color stops. Live preview, presets, hex input, copy or download.

Open