CSS Clip-Path Generator
Create CSS clip-path shapes visually — triangles, hexagons, stars, arrows, circles and more — with a live preview (including on images), then copy the code. Free.
clip-path to an <img> to clip a photo into this shape.💡 About clip-path
- Choose a preset shape — the CSS updates instantly.
- Percentages make the shape scale with the element's size.
- Works on any element, including images and background boxes.
Free CSS Clip-Path Generator
Create CSS clip-path shapes visually and copy the code in one click. Choose from triangles, hexagons, stars, arrows, circles, and more, preview the shape live (including on an image), and paste ready-to-use clip-path CSS. Free, no sign-up, runs in your browser.
What is the CSS clip-path property?
The clip-path property crops an element to a shape, hiding everything outside that shape. Instead of exporting a shaped image, you clip any element — a box, a background, or a photo — directly with CSS. It supports geometric shapes like circle and ellipse, and arbitrary polygons defined by a series of points, which lets you build hexagons, stars, arrows, chevrons, and custom cutouts entirely in code.
How to use the clip-path generator
It is instant:
- Pick a preset shape — the preview updates immediately.
- Toggle the image preview to see how a photo would be clipped.
- Copy the clip-path CSS (with the -webkit- prefix included).
- Apply it to any element in your project.
How clip-path shapes are defined
Most shapes use the polygon() function, which takes a list of x/y coordinate pairs as percentages of the element's size. For example, a triangle is polygon(50% 0%, 0% 100%, 100% 100%) — top-center, bottom-left, bottom-right. Because the values are percentages, the shape scales with the element automatically. The circle() and ellipse() functions take a radius and a center point, and inset() clips to a rectangle with optional rounded corners.
Clipping images and creating cutouts
One of the most popular uses is clipping photos into shapes — hexagon avatars, angled hero images, or diamond thumbnails — without editing the image files. Apply the clip-path directly to the img element. You can also create arrow and chevron shapes for section dividers and 'read more' indicators, or use a complex polygon to punch a frame-style cutout. Because it is all CSS, the shape stays crisp at any size and is easy to change later.
Browser support and fallbacks
clip-path with basic shapes and polygons is supported in all modern browsers, including current Chrome, Edge, Firefox, and Safari; Safari historically needed the -webkit-clip-path prefix, which this tool includes automatically. For very old browsers that do not support it, the element simply renders unclipped as a rectangle, so design your layout so that fallback still looks acceptable rather than broken.
Pro tip
Animate a clip-path by transitioning between two shapes with the same number of points for smooth reveal effects, and keep the point count equal when you want a shape to morph. For softer edges, remember clip-path produces hard edges; combine it with a subtle shadow or border on a wrapper if you need depth. Pair this with our CSS Gradient Generator to fill the clipped shape.
FAQ
Is this Clip-Path Generator free?
How do I clip an image into a shape with CSS?
What is the polygon() function?
Does clip-path scale with the element?
Do I need the -webkit- prefix?
Can I animate a clip-path?
What happens in browsers that don't support clip-path?
Related tools
Pro tip: pair this tool with CSS Box-Shadow Generator and CSS Gradient Generator for a faster SEO workflow.