✂️

CSS Clip Path Generator

LOCAL · Browser-Only

Create custom CSS clip-path shapes visually with interactive controls

Shape Presets

Background:

#ec4899

Grid

Interactive PreviewDrag points to reshape, or focus a point (Tab) and use arrow keys (Shift for bigger steps, Delete to remove)

Point Coordinates (3 points)

Custom Clip Path

Generated CSS

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

·Share recipe

Was this tool helpful?

What is CSS Clip Path Generator?

Free online CSS clip path generator to design CSS clip-path shapes with an interactive visual editor.

Choose from preset shapes (circle, ellipse, triangle, polygon, star, arrow) or build a custom polygon by adding and dragging points. Clip an image into a hexagon, cut a triangle out of a div, or mask a photo into any straight-edged shape, then copy the clip-path CSS for your stylesheet. The clip-path property hides everything outside the shape, and the editor runs entirely in your browser. No signup required.

How to Use CSS Clip Path Generator

1Choose a preset shape or start with a custom polygon
2Drag points to adjust the shape
3Add or remove polygon points for custom shapes
4Copy the CSS clip-path code

Frequently Asked Questions

What is CSS clip-path?

The clip-path CSS property creates a clipping region that determines which parts of an element are visible. Anything outside the clipping path is hidden. It's used for creative shapes, image masking, and transitions.

What shapes can I create?

Built-in shapes: circle, ellipse, and polygon. With polygon you can create any shape - triangles, stars, arrows, hexagons, and custom organic shapes by placing points freely.

Does clip-path affect layout?

No. The element still occupies its original rectangular space in the layout. Only the visual rendering is clipped. Other elements won't flow around the clipped shape.

How do I clip an image into a hexagon?

Pick the polygon preset and set six points, or choose a hexagon preset if available, then apply the generated clip-path to your img element. The image is masked to the hexagon while the underlying file stays unchanged, so you can swap shapes without re-editing the image.

Can I animate a clip-path shape?

Yes, as long as both shapes use the same type and the same number of points. A polygon with six points can transition smoothly to another six-point polygon. Generate the start and end shapes here, then animate between them with a CSS transition or keyframes.

Share this tool

Related Tools

◻️

Css border radius

Free online border radius generator - generate CSS border-radius values with visual editor

📸

Code snippet screenshot

Free online code screenshot - create beautiful code screenshots with syntax highlighting

📈

Cubic Bezier Generator

Free online cubic bezier generator - create custom CSS easing curves for transitions

🔘

CSS Button Generator

Free online CSS button generator - generate styled CSS buttons with hover effects

🪟

Glassmorphism css

Free online glassmorphism generator - create glass-effect CSS styles with blur and transparency

⬛

Flexbox builder

Flexbox generator - visual CSS flexbox layout builder with live preview and ready-to-copy CSS code

🎬

CSS Animation Generator

Free online CSS animation generator - generate CSS keyframe animations visually

✏️

SVG Path Editor

Free online SVG path editor - edit SVG paths and Bezier curves visually

Keep reading: Markdown Cheat Sheet and .gitignore templates reference. Doing this in code instead? See the utility endpoints.

✂️