Upload an image, trace the shape, copy clean CSS clip-path code — runs 100% in your browser
or browse files — JPG, PNG, WebP or SVG
/* Upload an image and start tracing to see CSS here */
The Image to CSS clip-path generator from ImageFix turns any picture into clean, production-ready CSS code. You upload an image, trace the outline you want, and the tool writes a clip-path declaration you can drop straight into a stylesheet. Everything runs in your browser — no uploads, no signup, no watermarks. It is the fastest way to move from a design reference to real CSS without hand-writing polygon coordinates.
If you have ever tried to recreate a star, a blob, a diagonal banner, or a custom card shape in CSS, you already know the pain. You either hunt for a generator that only produces pre-made shapes, or you sit with a calculator typing percentages one by one. This tool removes that friction. You trace what you see, and the CSS writes itself.
clip-path is a CSS property that clips an element to a geometric shape. Anything outside the shape becomes invisible, while the element still keeps its box in the layout. That behaviour makes it perfect for decorative cards, hero sections, image galleries, avatars, and any visual effect where you want a hard-edged shape without exporting transparent PNGs or SVG masks.
The property accepts several shape functions:
polygon() — a freeform shape defined by a list of X/Y coordinate pairs. This is what the generator uses when you trace a silhouette.circle() — a perfect circle defined by a radius and an optional centre point.ellipse() — an oval defined by horizontal and vertical radii.inset() — a rectangular crop with optional rounded corners.path() — an SVG path string, useful for complex curves.According to the W3C CSS Shapes Module Level 1 specification, clip-path works alongside other shapes like shape-outside and shape-margin, which together let you build layouts that flow around non-rectangular shapes. Browser support is broad: Can I Use reports support across Chrome, Firefox, Safari, and Edge for all the shape functions this tool produces.
You could write a clip-path by hand. In fact, for simple shapes — a triangle, a hexagon, a quick rounded card — hand-writing is fine. But the moment you need to match a real design, hand-writing becomes guesswork. A designer hands you a hero banner with a diagonal cut, or a client wants their product photographed inside a leaf shape, and suddenly you are squinting at pixels and guessing percentages.
A clip-path generator solves this by giving you a visual canvas. You upload the reference image, click the outline, and watch the shape grow in front of you. The tool converts every click into a percentage coordinate, normalises it to the image's aspect ratio, and outputs clean CSS. You see the result in a live preview square, so you know exactly what the browser will render before you copy the code.
The benefits are practical:
The generator loads your image with the browser's FileReader API and draws it to an <img> element inside a preview stage. Over the image, the tool draws an SVG overlay with a viewBox of 0 0 100 100 and preserveAspectRatio="none". That choice is deliberate: it means one unit in the SVG equals one percent of the image's width and height, which is exactly what clip-path: polygon() expects.
When you click on the overlay, the tool converts the click position into percentage coordinates, stores the point, and re-renders the polygon. Each point is also drawn as a draggable circle handle. Dragging the handle updates the coordinate in real time, so you can nudge a shape until it looks right.
For circle and ellipse modes, the tool uses the same overlay but swaps the polygon for a circle or ellipse element. A draggable radius handle lets you resize the shape without leaving the canvas.
When you change options — precision, units, JSX output, rounded corners, -webkit- fallback — the tool rebuilds the CSS string from scratch and applies it to the live preview square. Because the preview uses the exact same CSS string as the output panel, what you see is what you get.
Drag a JPG, PNG, WebP, or SVG onto the drop zone, or click it to browse. The image is read locally — it never touches a server. You can also paste an image directly from your clipboard with Ctrl+V (or Cmd+V on macOS), which is handy when the reference is already in a design tool or a chat thread.
Use the smallest image that still shows the outline clearly. A 600-pixel-wide screenshot is easier to trace than a 4K photo, and the tool does not need high resolution to produce accurate percentages.
With the image loaded, click around the outline you want to clip. Each click adds a polygon point. You can add up to 60 points, which is enough for silhouettes, product cut-outs, and even simple logos. If you place a point badly, drag it — every point is a live handle. If you add too many, press Undo to remove the last one, or Clear to start fresh.
For simple shapes, switch to Circle or Ellipse mode. Drag the radius handle outward to enlarge the shape, and the CSS updates live. Circle mode is ideal for avatars and round crops; ellipse mode is perfect for banners and pill-shaped buttons.
The toolbar above the canvas controls the generated CSS:
style={{ clipPath: '...' }} snippet.clip-path: inset() with a round radius — the cleanest way to give a rectangular card a rounded corner via clip-path.-webkit-clip-path line above the standard property for older Safari builds.The right-hand panel shows a live 260×260 square with the clip-path applied. If the shape looks correct, click Copy CSS to copy the declaration, or Download CSS to save a ready-to-use .css file containing a .clipped-element { ... } rule. Paste it into your stylesheet and you are done.
A typical output for a traced shape looks like this:
.clipped-element {
clip-path: polygon(12% 8%, 88% 14%, 95% 62%, 74% 96%, 22% 90%, 5% 55%);
}
Each pair X% Y% is a corner point. The browser connects them in order and closes the path automatically. Points are ordered as you clicked them, so tracing the outline in one direction (clockwise is easiest) produces a clean polygon. If the shape looks like a bow-tie, you probably clicked points out of order — press Undo until it looks right, then continue.
For a circle, the output is simpler:
.avatar {
clip-path: circle(40% at 50% 50%);
}
That means a circle with radius 40% of the element's size, centred at 50% 50%. Change the centre point to shift the crop, or change the radius to change the crop size. For an ellipse:
.banner {
clip-path: ellipse(45% 30% at 50% 50%);
}
The first value is the horizontal radius, the second is the vertical radius.
Diagonal cuts between hero and content sections are a staple of modern landing pages. Instead of exporting a triangle SVG, apply a polygon clip-path to the hero background. The page loads faster and the shape stays crisp on every screen.
A grid of photos becomes visually interesting when each tile has a different silhouette. Trace each shape once, store the clip-path in a class, and reuse it. Because the coordinates are percentages, the same class works on desktop and mobile.
Circle and ellipse modes produce a border-radius: 50% equivalent, but clip-path is more flexible — you can shift the centre, use ellipses for portrait framing, or trace a custom badge shape around a profile photo.
Product photography often comes with a soft shadow or a floor line that breaks the composition. A polygon clip-path can isolate the product's outline without editing the image file. Store owners can update the CSS without touching the asset.
clip-path works on any element, including text. Trace a bold shape, apply it to an h1, and the letters get clipped to that silhouette — a technique often used in editorial design and posters.
Because clip-path is animatable, you can transition between two polygons to create a wipe or a reveal effect. A common pattern is to start with a thin polygon (a line) and animate to the full shape. The web.dev transitions guide covers the timing and easing basics that pair well with clip-path animation.
These three properties are often confused. They solve different problems.
border-radius rounds the corners of a box. It is the simplest option and the best for rectangular cards with soft corners. It cannot produce diagonal or organic shapes.
clip-path cuts an element to a geometric shape with hard edges. It is the right tool for polygons, circles, ellipses, and rounded rectangles (via inset()). It does not support soft, gradient, or image-based edges.
mask uses an image or gradient to control per-pixel opacity. It supports soft edges, feathered transitions, and complex artwork. The cost is a heavier implementation: you need a mask image or a gradient, and the CSS is less portable. For hard-edged crops, clip-path is almost always the better choice.
For a deeper comparison, see the CSS-Tricks guide to clipping and masking. The generator includes a -webkit- fallback toggle so you can support older Safari without breaking the modern declaration.
aspect-ratio on the element to match the reference image, or accept the stretch as a design choice.outline. Adding a temporary outline: 1px solid red to the element helps you see the box while tuning the clip.inset() for rounded cards. If your shape is a rectangle with rounded corners, clip-path: inset(0 round 12px) is cleaner than a polygon with curved points.One of the quieter benefits of clip-path is performance. Traditional shape work often requires transparent PNGs or SVG files. Each asset costs a network request, adds bytes to the page, and delays Largest Contentful Paint (LCP). A CSS clip-path is part of your stylesheet, so it ships with the first paint and adds zero additional requests.
Google's Core Web Vitals guidance is clear: less critical-path weight means better LCP scores. Replacing a hero image overlay with a clip-path is a small change with a measurable impact on slow connections. For a broader look at browser-rendered image effects, see ImageFix's All-in-One Image Converter and Image Compressor, which handle the asset side of the same problem.
clip-path is a visual effect, not a semantic one. Assistive technologies still read the full element, even if parts of it are clipped. That is usually the right behaviour — a clipped heading should still be read as a heading. The risk is that a focusable element (a link, a button) may become partially or entirely invisible when clipped, which breaks keyboard navigation.
The fix is simple: never clip interactive elements so tightly that the focus ring disappears. If you must clip a button, add an explicit focus style that sits inside the visible shape. For decorative images, use alt="" as usual. For content images, the clip does not change how screen readers announce them.
Yes. clip-path is animatable as long as the shape function is the same on both ends. Two polygons with the same number of points can transition smoothly. Two polygons with different point counts do not interpolate, so plan your keyframes accordingly. The MDN clip-path reference lists the animatable properties in detail.
No. Clip-path is purely visual. Text that is clipped is still in the DOM, still read by screen readers, and still indexed by search engines. Do not use clip-path as a replacement for hiding content you want excluded from indexing — use display: none or the hidden attribute for that.
Yes. Apply the clip-path to the element that carries the background, not to the background itself. The element's content and its background are clipped together. If you need to clip only the background but keep the content unclipped, wrap the background in a child element and clip that child.
The browser fills the area inside the polygon and hides everything outside. If you want the inverse — hide the inside, show the outside — you need a polygon with a "hole", which clip-path does not support directly. Use mask with a gradient instead, or draw a polygon that traces the outside edge of your shape with a matching inner boundary using the evenodd fill rule in an SVG mask.
Yes, but with caveats. A clipped sticky element still sticks normally; the clip applies to the element's painted output. A clipped fixed element can behave unexpectedly in some browsers because clip-path creates a new stacking context. Test on your target browsers before shipping.
overflow: hidden clips an element's children to its rectangular box. clip-path clips to any shape. Both create a new clipping context; only clip-path supports non-rectangular edges. If your design needs a non-rectangular cut, clip-path is the correct tool.
If you are building a page that uses clip-path, you will likely need a few other image operations. ImageFix runs the whole toolkit in the browser, with no uploads and no signup:
Each tool is standalone, private, and free. Bookmark the ImageFix tools page to keep them within reach.
The Image to CSS clip-path generator removes the guesswork from shape-based CSS. You upload an image, trace what you see, and copy clean code. The output is responsive, editable, and lighter than any asset-based alternative. It works in every modern browser, ships with a live preview, and stores nothing — the file never leaves your device. Whether you are building a landing page, an e-commerce product card, an editorial layout, or a design system, this tool gets you from reference to CSS in under a minute.