What does a CSS clip-path generator do?
It builds clip-path values visually—polygon points, circles, ellipses—and exports copy-ready CSS with -webkit-clip-path.
Build CSS clip-path shapes visually—polygon editor with draggable points, presets for circles and stars, and one-click export with -webkit-clip-path. Preview on images or gradients, then paste into your stylesheet.
CSS clip-path generator with a visual polygon editor, shape presets, live preview, and copy-ready CSS including -webkit-clip-path.
A CSS clip-path generator helps you create the clip-path property without guessing polygon coordinates. clip-path defines which part of an element remains visible—everything outside the shape is clipped away. Supported functions include polygon() for custom corners, circle() and ellipse() for round masks, and inset() for inner rounded rectangles.
This tool lets you drag polygon points on a canvas, apply presets (triangle, star, hexagon, arrow), validate custom syntax in a textarea, and export ready-to-paste CSS including the -webkit-clip-path prefix for Safari. Use it for hero images, avatar masks, card cutouts, and animated shape reveals.
All editing runs in your browser; coordinates are not uploaded to EverydayTools servers.
Concise answers for common searches — definitions, steps, and comparisons.
It builds clip-path values visually—polygon points, circles, ellipses—and exports copy-ready CSS with -webkit-clip-path.
polygon(x1 y1, x2 y2, …) lists corner coordinates in order, usually percentages such as polygon(50% 0%, 100% 100%, 0% 100%).
Clip Path Generator runs in your browser when supported—inputs are not uploaded to EverydayTools servers.
Choose Circle, Ellipse, Inset, or a polygon preset (star, hexagon, arrow). The clip-path value fills in automatically.
For polygon() shapes, drag numbered handles or click the canvas to add points. Use arrow keys on a selected point for 1% nudges.
Switch light, dark, or checkerboard backgrounds and card/hero sizes to see how the mask behaves on real layouts.
Copy the full CSS class (with -webkit-clip-path), inline style, React style, Tailwind arbitrary value, or SVG <clipPath> markup for polygons.
Input
circle(50% at 50% 50%)Output
.avatar { clip-path: circle(50% at 50% 50%); -webkit-clip-path: circle(50% at 50% 50%); }50% radius centered—standard round profile image crop without border-radius limits.
Input
polygon(0 0, 100% 0, 100% 85%, 0 100%)Output
Slanted bottom edge on a full-width hero banner.Four-point polygon in percentages—common marketing layout cut.
Input
polygon(50% 0%, 61% 35%, 98% 35%, …)Output
Decorative star clip for labels and stickers.Use the built-in star preset, then fine-tune points in the editor.
Common real-world scenarios where this tool saves time.
Front-end developers
Prototype diagonal cuts, hexagon highlights, and image masks before committing coordinates in production CSS.
UI and brand designers
Test star, arrow, and custom polygon brand shapes with live preview on photography or gradients.
Students learning CSS
See how percentage coordinates map to corners, then copy validated clip-path into assignments and CodePen demos.
Choose the right CSS tool for your layout shape.
| Need | clip-path | border-radius |
|---|---|---|
| Round avatar | circle() mask | 50% radius on square |
| Star or arrow badge | polygon() preset | Not possible |
| Rounded card corners | inset() optional | Usually simpler |
| Animated shape morph | polygon() transitions | Limited |
How this EverydayTools page compares for typical use.
| Aspect | EverydayTools | Typical alternative |
|---|---|---|
| Visual editor | Drag polygon points | Hand-code coordinates |
| Export | CSS class + Tailwind | Copy one line only |
| Privacy | Browser-local | Often cloud-based |
| Cost | Free | Paid plugins |
Advertisement
clip-path clips an element to a shape—polygon, circle, ellipse, or inset—hiding everything outside that region. Unlike border-radius, it can form stars, arrows, and arbitrary marketing shapes.
polygon() commonly uses percentages (relative to the element box) or length units (px, em). circle() and ellipse() accept radius keywords and positions. This generator outputs percentage-based polygons for responsive layouts.
Modern browsers use clip-path. WebKit-based engines still benefit from -webkit-clip-path alongside the standard property—this tool exports both in the CSS class block.
Yes—apply clip-path to the img or a wrapper. For complex polygons, test in Safari and Firefox; very old browsers may need SVG clipping instead.
border-radius only rounds rectangular corners. clip-path creates circles, ellipses, polygons, and custom silhouettes—use it when border-radius cannot describe the shape.
Use an arbitrary value such as [clip-path:polygon(...)] or paste the value-only export into your own utility. Tailwind does not ship clip-path presets by default.
Yes—for polygon() shapes the SVG tab exports a ready-made <clipPath> with polygon points plus an objectBoundingBox variant. Circle and ellipse are best exported as CSS clip-path with -webkit-clip-path.
Yes. The share link encodes your current clip-path in the URL (?clip=…) so teammates can open the same shape. Settings also autosave in localStorage.
Yes. It is free, requires no signup, and runs in your browser when supported—shape data is not uploaded for normal use.
Clip-path coordinates are edited client-side; shape points are not uploaded.
Verify complex polygons in target browsers; filter and clip-path interactions vary.
For design prototyping—confirm accessibility contrast when clipping text or UI.
Part of Design & UI Tools
More free tools for the same workflow.
Advertisement
Reviewed by EverydayTools Editorial Team on 2026-06-02.