CSS clip-path
Generator
An intuitive generator for creating CSS clip-path shapes via drag-and-drop. Supports polygons, circles, and ellipses, providing instantly usable CSS code.
Editor
Click on canvas to add vertex. Drag to move. Right click to delete.
Preview Settings
Hover Animation (Optional)
If enabled, CSS for clip-path + transition on hover will be generated. For polygon mode, make sure the number of vertices matches.
Editing the base shape in the editor. Switch to hover state to configure the shape on hover.
Generated Code
You might also like
About CSS clip-path Generator
This generator is a free online tool that lets you intuitively create CSS clip-path properties via drag-and-drop operations.
Previously, clipping images required manual coordinate calculations. With this tool, you can visually create shapes and generate CSS code with a single click.
It supports diverse shapes and even generates code for smooth hover animations.
How to Use
1️⃣ Select a Shape
Choose your preferred shape from the presets or tabs.
2️⃣ Adjust the Shape
Drag the vertices on the canvas. In polygon mode, you can click to add or right-click to delete vertices.
3️⃣ Copy the Code
Once satisfied with the preview, click 'Copy' and paste it into your code.
clip-path Property Guide
Explanation of the main shape functions:
■ polygon() — Polygon
clip-path: polygon(x1 y1, x2 y2, x3 y3, ...)
Specify any number of vertex coordinates. A minimum of 3 vertices is required.
■ circle() — Circle
clip-path: circle(radius at centerX centerY)
Specifies the circle's radius and center coordinates.
■ ellipse() — Ellipse
clip-path: ellipse(rx ry at centerX centerY)
Draws an ellipse by specifying different radii for the X and Y directions.
■ inset() — Rectangular Inset
clip-path: inset(top right bottom left round radius)
Specifies how much to cut inward from the element's boundaries.
FAQ
- Q.Does clip-path affect SEO?
- No. The clip-path property only changes visual rendering and does not alter the HTML structure or text content. Search engines will still recognize and index text outside the clipped area normally.
- Q.What is the difference between CSS clip-path and SVG clipPath?
- CSS clip-path operates purely within stylesheets using built-in functions. SVG clipPath defines an SVG element and references it. While CSS is easier to apply, SVG is better suited for highly complex paths.
- Q.Can I animate clip-path on hover?
- Yes. You can smoothly animate the transition using the transition property, provided that the number of vertices is exactly the same before and after (for polygons).
- Q.Are areas outside the clip-path clickable?
- No. Pointer events such as clicks or hovers do not trigger on areas outside the clipped region. This ensures interactive elements behave as expected.
- Q.Are there any security risks when using this tool?
- None at all. All processes, including uploading and previewing your own images, are executed entirely within your browser.
Use Cases
Diagonal Cut Hero Sections
Create dynamic first impressions by diagonally clipping background images in the hero header of a website.
Unique Profile Images
Instead of a standard circle, you can clip member avatar images into eye-catching custom shapes like hexagons or stars.
Reveal-on-Hover Animations
Start with a small clipped image and smoothly animate it to full size on hover effortlessly.
Send Feedback
Please let us know your thoughts to help us improve the tool.
Feedback is temporarily suspended
The server is busy or spam protection is active. Please try again later.