What is CSS Clip Path Maker?

CSS Clip Path Maker is a visual editor for creating CSS clip-path shapes. Instead of writing clip-path values by hand, you can drag handles on an interactive canvas to design your shape and copy the generated CSS code.

Client-side processing: All editing happens in your browser — no uploads, no tracking, complete privacy.

Why Use a Visual Clip-Path Editor?

The CSS clip-path property is powerful but challenging to write manually. Polygon shapes require precise coordinate pairs, and even small changes need recalculating multiple values. A visual editor solves this by letting you:

Instant Visual Feedback

Drag handles and watch the shape update in real time on the canvas.

Precision Control

Use grid overlay and numeric inputs for exact positioning with 0.1% accuracy.

28 Ready-Made Presets

Choose from stars, arrows, shields, and more — then customize to your needs.

Import Existing Code

Paste your current clip-path CSS to edit it visually and refine further.

Supported Shape Types

Polygon

Create any shape with multiple points connected by straight edges.

Circle

Define a circular clipping area with adjustable radius and center.

Ellipse

Create an oval shape with independent horizontal and vertical radii.

Inset

Clip from edges inward with optional border-radius for rounded rectangles.

Who Is This For?

Frontend developers building custom UI components with non-rectangular shapes
Web designers creating hero sections, image masks, and decorative elements
CSS learners exploring how clip-path values work through visual feedback

Table of Contents

1. What is CSS Clip Path Maker?
2. How to Use CSS Clip Path Maker
3. Features
4. Frequently Asked Questions

How to Use CSS Clip Path Maker

Creating a clip-path shape takes just a few steps. Follow this guide to master the visual editor:

Choose a Shape Type

Click one of the four shape tabs at the top of the editor:

Polygon - For custom shapes with multiple points (default)
Circle - For circular clipping
Ellipse - For oval shapes
Inset - For rectangular clipping from edges

Or browse the Presets section to start from a ready-made shape like stars, arrows, or shields.

Edit the Shape

Each shape type has its own editing controls:

Polygon Editing

Drag handles on the canvas to move points
Click on an edge to add a new point between existing ones
Double-click a handle to remove a point (minimum 3 points required)
Use the points list on the left to enter exact X/Y values

Circle & Ellipse Editing

Drag the center handle to reposition the shape
Drag the radius handles to resize
Use sliders for precise control over radius and center position

Inset Editing

Drag edge handles to adjust how much is clipped from each side
Enable Lock All to change all four sides simultaneously
Adjust Border Radius to round the corners of the inset rectangle

Use Canvas Options

Outside - Toggle visibility of the area outside the clip-path (shown as a dimmed overlay)
Grid - Show a 10×10 grid overlay for alignment
Background - Change the canvas color or upload an image to preview your clip-path on real content

Copy the CSS

The generated CSS code appears in the output panel on the right. Click Copy CSS to copy it to your clipboard, then paste it into your stylesheet.

Keyboard Shortcuts

Shortcut	Action
`Ctrl` + `Z` / `Cmd` + `Z`	Undo last change
`Ctrl` + `Y` / `Cmd` + `Shift` + `Z`	Redo last undone change
Arrow keys	Nudge selected polygon point by 1%
`Shift` + Arrow keys	Nudge selected polygon point by 5%
`Delete` / `Backspace`	Remove selected polygon point

Features

Interactive Visual Editor

The canvas displays your clip-path shape in real time. Drag handles to modify the shape and see the CSS code update instantly. The canvas uses an aspect ratio of 4:3 with percentage-based coordinates for accurate positioning.

Real-time preview: Every change you make is immediately reflected in both the visual canvas and the generated CSS output.

Comprehensive Shape Support

All four CSS clip-path shape functions are fully supported with dedicated editing interfaces:

Polygon

Define any shape with an unlimited number of points connected by straight lines. Perfect for custom geometric designs.

Circle

A perfect circle with adjustable radius and center position. Ideal for circular image masks and avatars.

Ellipse

An oval with independent horizontal (X) and vertical (Y) radii. Great for stretched circular effects.

Inset

Clip inward from edges with optional rounded corners via border-radius. Perfect for framed content areas.

28 Built-in Presets

Start from any of 28 preset shapes organized in 6 categories to accelerate your workflow:

Basic Shapes

Triangle, trapezoid, rhombus, and other fundamental geometric shapes.

Regular Polygons

Pentagon, hexagon, heptagon, and octagon with perfectly symmetrical sides.

Stars

4-point, 5-point, 6-point stars, plus cross and X shapes for decorative elements.

Arrows

Directional arrows in 4 directions (up, down, left, right) plus chevron variations.

Complex Shapes

Message bubble, bevel, rabbet, shield, and other advanced geometric designs.

Circle/Ellipse/Inset Variations

Pre-configured circular, oval, and inset shapes with common configurations.

Precise Point Editing

For polygon shapes, every point can be edited numerically through the points list panel. Each point shows its X and Y coordinates with 0.1% precision. Select a point by clicking its row, then fine-tune with the input fields or arrow keys.

Pro tip: Use arrow keys for quick adjustments — hold Shift for 5% increments instead of 1%.

Smart Point Management

Adding Points

Click on Edges

Click anywhere near a polygon edge
New point inserted between nearest vertices
Must be within ~5% of edge to register

Removing Points

Multiple Methods

Double-click handle on canvas
Select point and press Delete/Backspace
Click remove button (×) in points list
Minimum 3 points enforced

Inset Lock Feature

When working with the inset shape, enable "Lock All" to change all four sides simultaneously. This is useful when you want uniform clipping from all edges. The border-radius slider adds rounded corners to the inset rectangle.

Example: Inset with rounded corners

/* Uniform 10% inset with 20% corner radius */
clip-path: inset(10% round 20%);

Undo/Redo History

Every shape change is recorded in a history stack (up to 50 states). Use the undo/redo buttons or keyboard shortcuts to step through your editing history without losing your work.

History Capacity 50 states

CSS Import

Already have a clip-path value? Click "Import" and paste your CSS code. The tool parses polygon, circle, ellipse, and inset values and loads them into the visual editor for further editing.

Flexible import: Works with or without the clip-path: prefix — just paste the value and click Apply.

Canvas Helpers

Two overlay options help you work more effectively:

Outside Area Overlay

A dimmed overlay showing the region outside your clip-path, making it clear what will be visible and what will be clipped.

10×10 Grid

A percentage-based grid for precise alignment and symmetry when positioning points.

Custom Backgrounds

Preview your clip-path on different backgrounds by changing the canvas color or uploading an image. This helps visualize how the shape will look on your actual content before implementing it in your design.

Solid color picker for simple backgrounds
Image upload for realistic content preview
Instant background switching without losing your shape

Frequently Asked Questions

What is CSS clip-path?

The CSS clip-path property defines a clipping region for an element. Only the portion inside the clipping shape is visible; everything outside is hidden. It's commonly used for creating non-rectangular layouts, image masks, and decorative UI elements.

Which browsers support clip-path?

The clip-path property with basic shapes (polygon, circle, ellipse, inset) is supported in all modern browsers including Chrome, Firefox, Safari, and Edge. For older browsers, consider providing a fallback or using a polyfill.

Excellent support: Over 97% of global browsers support clip-path with basic shapes.

How do I add a point to a polygon?

Click anywhere near an edge of the polygon on the canvas. A new point will be inserted between the two nearest existing points. The click must be within approximately 5% of an edge to register.

How do I remove a polygon point?

You have three options:

Double-click the handle on the canvas
Select the point and press Delete or Backspace
Click the remove button (×) in the points list

Minimum requirement: A polygon must always have at least 3 points to remain valid.

Can I import my existing clip-path CSS?

Yes. Click the "Import" button below the CSS output, paste your clip-path value (with or without the clip-path: prefix), and click "Apply". The tool supports all four shape types: polygon, circle, ellipse, and inset.

What's the difference between circle and ellipse?

Circle

Single Radius

One radius value
Always perfectly round
Equal width and height

Ellipse

Two Independent Radii

Separate X and Y radii
Creates oval shapes
Can be wider or taller

What does the "round" value in inset do?

The "round" parameter in inset() adds border-radius to the clipped rectangle. For example:

Inset with rounded corners

/* 10% inset from all edges with 20% corner radius */
clip-path: inset(10% round 20%);

Why can't I delete a polygon point?

A polygon requires at least 3 points to be a valid shape. If you only have 3 points remaining, the delete controls will be disabled to prevent creating an invalid polygon.

How precise are the coordinates?

All coordinates use percentage values with 0.1% precision (one decimal place). This provides enough accuracy for most use cases while keeping the CSS output clean and readable.

Can I use a background image to preview?

Yes. Click the upload button next to the color picker in the canvas settings area. Select an image file and it will be displayed as the canvas background, letting you preview how your clip-path shape will look on real content.

Are my shapes saved between sessions?

No, shapes are not persisted between page loads. Make sure to copy your CSS code before leaving the page. You can also save your clip-path values externally and import them later using the Import feature.

Remember to save: Always copy your CSS output before closing the page to avoid losing your work.

Is my data sent to any server?

No. All shape editing and CSS generation happens entirely in your browser. No data is uploaded or transmitted to any server, including any background images you load.

100% client-side: Your privacy is guaranteed — all processing happens locally on your device.