home/dev/clip-path

Free Online CSS Clip-Path Generator

Create CSS clip-path shapes with a visual editor

Drag the cyan handles in the preview to reposition points.

P1 50%,0%P2 100%,100%P3 0%,100%
clip-path: polygon(50% 0%, 100% 100%, 0% 100%);

How to Use Clip-Path Generator

  1. 1

    Choose a shape type

    Select polygon, circle, ellipse, or inset from the shape selector.

  2. 2

    Use a preset or start custom

    Click a preset shape (triangle, star, etc.) or add points manually.

  3. 3

    Drag to edit

    Drag the cyan handle points in the preview to adjust the shape.

  4. 4

    Copy CSS

    Click Copy to get the clip-path CSS property value.

Frequently Asked Questions

Is my data safe?
Yes. All processing happens entirely in your browser. Your data never leaves your device and is never uploaded to any server.
Does clip-path work in all browsers?
Yes. clip-path with basic shapes and polygons is supported in all modern browsers. For the widest compatibility, the tool generates standard clip-path without vendor prefixes.
Can I animate between clip-path shapes?
Yes, if both shapes have the same number of polygon points. CSS transitions and animations can smoothly morph between clip-path values. Generate keyframe values using different presets with the same point count.
What units does clip-path use?
This tool uses percentage values, which makes the clip-path responsive — it scales with the element's size. You can also use other CSS units in your code if needed.

Learn more

About Clip-Path Generator

Create CSS clip-path shapes with an interactive visual editor. Draw polygons, circles, ellipses, and inset rectangles by dragging points directly on the preview. Choose from preset shapes like triangles, hexagons, stars, and arrows, then customize them by dragging handles. Copy the generated clip-path CSS with one click. All processing happens in your browser.

Why Use Clip-Path Generator?
  • Drag-and-drop point editing makes creating complex shapes intuitive and fun.
  • Preset shapes (triangle, pentagon, hexagon, star, arrow) give you instant starting points.
  • Supports all clip-path types: polygon, circle, ellipse, and inset.
  • Touch-friendly — works on tablets and mobile devices.
  • Real-time preview shows the clipped shape as you edit.
Common Use Cases

Hero section shapes

Create diagonal, angled, or curved section dividers for modern page layouts.

Image masking

Clip images into circles, hexagons, stars, or custom shapes for creative galleries.

Decorative elements

Design arrow shapes, badges, ribbons, and other decorative UI elements using pure CSS.

Animation keyframes

Generate clip-path values for CSS animation keyframes to create morphing shape transitions.

More Developer Tools

{} JSON Formatter64 Base64🔑 JWT Decoder.* Regex Tester# Hash Generator% URL Encode/Decode& HTML EntitiesID UUID Generator⏱ Unix Timestamp01 Number Base📸 Code to Image📦 HTML/CSS/JS Minifier± Code Diff🌈 CSS Gradient Generator💠 Box Shadow Generator🪟 Glassmorphism Generator↔️ Flexbox Generator📊 CSS Grid Generator