Clip Path Generator
Build CSS clip-path shapes visually - no manual coordinate guessing. Choose from 12 presets, drag polygon points on the live preview, and copy the CSS in one click.
Shape Presets
Live Preview
Drag the dots to reshape. Click + on edges to add points.
Shape Controls
Drag the colored dots on the preview to reshape. 4 points
CSS Output
polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
Browser support:clip-path is supported in all modern browsers (Chrome, Firefox, Safari 15.4+, Edge). For older Safari (<15.4), use the -webkit-clip-path prefix.
Drag-to-Edit
Drag polygon points directly on the visual preview to reshape in real time. No need to guess coordinates - see exactly how your clip path looks as you adjust it.
12 Preset Shapes
Start from common shapes: circle, triangle, diamond, hexagon, star, heart, and more. Each preset is tuned for the best starting point, ready to customise further.
Instant CSS Output
Copy the CSS clip-path value or full declaration with one click. All modern browsers are supported with no vendor prefixes needed.
Works Offline
All processing happens in your browser - no server round-trips. The tool works even without an internet connection once the page is loaded.
Creative Image Cropping
Clip images into custom shapes - diamonds, hexagons, stars, or polygons - for unique portfolio thumbnails, gallery grids, and hero section visuals.
Parallax & Scroll Animations
Add clip-path transitions to reveal elements as users scroll. Animate between polygon shapes for smooth, modern scroll-triggered effects.
Card & Section Dividers
Use diagonal or curved clip paths to create section dividers between page blocks. Better than CSS transforms for maintaining responsive layout.
Profile & Avatar Frames
Crop user profile photos into circles, hexagons, or custom polygon frames for team pages, social features, and user directories.
Hero & Landing Page Design
Create eye-catching hero sections with diagonal splits, overlapping shapes, and asymmetric clip paths that guide the eye through the page.
Geometric Brand Assets
Build consistent geometric shapes for brand illustrations, icon backgrounds, and decorative elements that match your brand identity.
What is CSS clip-path?
The CSS clip-path property lets you create a clipping region that determines which parts of an element are visible. Everything outside the clipping region is hidden. It's like using a cookie cutter - the shape determines what's shown and what's cut away. The property accepts circle(), ellipse(), inset(), polygon(), and path() functions.
How clip-path shapes work
Each shape function takes coordinates as percentages (0-100) mapped to the element's bounding box. For polygon(), points are connected in order to form the clipping shape. Circle() takes a radius and center position. Inset() clips inward from each edge. The path() function uses SVG path syntax for completely custom shapes.
Animating clip-path
clip-path is an animatable property in CSS. You can transition between compatible shapes (e.g., polygon with the same number of points) for smooth morphing animations. Use @keyframes to animate clip-path values, or use CSS transitions on hover. This is particularly effective for image reveals, page transitions, and interactive hover states.
Browser compatibility
CSS clip-path is supported in all modern browsers. For polygon, circle, and ellipse, support goes back to Chrome 55+, Firefox 54+, Safari 11+, and Edge 79+. The path() function requires Safari 15.4+. For maximum compatibility, consider providing a fallback or using -webkit-clip-path for older browsers.
Box Shadow Generator
Build CSS box-shadow effects visually with multiple layers, blend modes, and live preview.
Border Radius Generator
Create CSS border-radius shapes with per-corner controls and 8 shape presets.
CSS Filter Generator
Adjust blur, brightness, contrast, and 9 other CSS filter functions with live preview.
Backdrop Filter Generator
Create frosted glass effects with CSS backdrop-filter - blur, brightness, and more.
CSS clip-path is used to clip (hide) parts of an element so only a specific shape is visible. Common uses include: cropping images into custom shapes (circles, polygons, stars), creating diagonal section dividers, animating page transitions, making hover-effect reveals, and building geometric design elements without SVG or image assets.
Yes! clip-path is an animatable property. You can use CSS transitions or @keyframes to animate between clip-path values. For smooth morphing, ensure both states use the same shape function with the same number of points (e.g., polygon with 6 points morphing to another polygon with 6 points). Animating between different shape types (circle to polygon) may not interpolate smoothly in all browsers.
The older clip property (deprecated) only worked with absolutely positioned elements and accepted a rect() shape. clip-path is the modern replacement that supports circle(), ellipse(), inset(), polygon(), and path() shapes, works with any positioned element, and is fully animatable. Always use clip-path for new projects.
For smooth polygon-to-polygon animation, both polygons must have the same number of points. The browser interpolates each point's position independently. For example, a 6-point hexagon can smoothly morph to a 6-point star. If the point counts differ, the animation will snap rather than morph smoothly.
The path() function accepts SVG path data (d attribute syntax) to create completely custom clipping shapes. For example: clip-path: path('M 50 0 L 100 50 L 50 100 L 0 50 Z'); creates a diamond. This gives you unlimited shape possibilities beyond what circle/ellipse/inset/polygon can create. Note: path() requires Safari 15.4+.
No - clip-path only affects the visual rendering of the element. The element's original bounding box still occupies the same space in the page layout. Events (click, hover) will only fire within the visible clipped area in most modern browsers. For truly non-rectangular layout, consider using CSS shapes or shape-outside.
For polygon, circle, ellipse, and inset: no prefix needed in modern browsers (Chrome 55+, Firefox 54+, Safari 11+, Edge 79+). For path(): Safari 15.4+ without prefix. For very old browsers, you can use -webkit-clip-path as a fallback. The tool outputs standard unprefixed clip-path which works in all current browsers.
Yes! clip-path can be applied to any HTML element, including text. You can clip text into specific shapes - but the text itself is clipped, not reflowed. For text that follows a path or shape, use CSS shapes with shape-outside instead. A popular use is creating text-only reveal animations with clip-path morphing.