100% PrivateFree
Preview
Points (3)
1
2
3
CSS Output
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);

How It Works

1

Choose a Shape

Select a preset shape or start with a custom polygon.

2

Drag Points

Click and drag the control points to customize your shape. Add or remove points as needed.

3

Copy CSS

Copy the generated clip-path CSS property to use in your stylesheet.

Frequently Asked Questions

What is CSS clip-path?
clip-path is a CSS property that clips an element to a specific shape, hiding parts outside the defined area. It supports circles, ellipses, polygons, and custom paths.
What shapes can I create?
You can create circles, ellipses, and any polygon shape with custom vertices. This tool includes presets for triangles, pentagons, hexagons, stars, arrows, and diamonds.
Does clip-path affect layout?
No, clip-path only affects the visual rendering. The element still occupies its full space in the layout, similar to how visibility:hidden works.
Can I animate clip-path?
Yes, clip-path can be animated with CSS transitions and animations, as long as the shapes have the same number of points. This enables morphing effects.
Is clip-path well supported?
clip-path polygon is supported in all modern browsers. The circle() and ellipse() forms have even broader support. Only IE lacks support.
Share:

About Clip Path

What this tool does

Developer and design tools include CSS generators (gradients, shadows, glassmorphism), code playgrounds, color pickers, responsive previews, and reference charts for HTML tags, HTTP methods, and keyboard shortcuts.

Why use this tool

Front-end development involves constant context switching between code and visual output. Having generators and references in a single browser tab speeds up prototyping and reduces the need to search through documentation sites.

How it works

Each tool provides an interactive UI: you tweak parameters (colors, radii, durations), and the tool generates the corresponding CSS, HTML, or SVG code in real time. Copy the snippet directly into your project.

Pro tip

Use the CSS variable output option when available. It makes your generated code theme-friendly and easier to maintain across a design system.

Deep Dive: Related Research

The Complete Guide to CSS in 2026

30,000 words · 65 min read

The Complete SVG Guide 2026: Paths, Shapes, Filters, Animation, Accessibility & Optimization

30,000 words · 60 min read

Explore More

Love this tool? Explore 12467+ more

Free online tools for images, PDFs, text, code, and more. All running in your browser.

Explore All Tools