No Login Data Private Local Save

Image to CSS clip‑path - Online Trace Silhouette

23
0
0
0

Image to CSS clip-path

Upload any image and instantly trace its silhouette to generate a clip-path: polygon() CSS declaration. Perfect for creative layouts, shaped containers, and organic design elements.

Drop your image here or click to browse – PNG, JPG, WebP, SVG
Try a sample:
Threshold 128
More sensitive Less sensitive
Simplification Medium
More detail Smoother
Vertices: 0
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);

Upload an image to start tracing

Frequently Asked Questions

What is CSS clip-path?

CSS clip-path is a property that creates a clipping region defining which part of an element should be visible. The polygon() function allows you to define custom shapes using a series of coordinate points, enabling organic, non-rectangular layouts directly in CSS without any image masks.

How does the polygon() function work?

The polygon(x1 y1, x2 y2, ...) function accepts a comma-separated list of coordinate pairs. Each pair defines a vertex of the clipping shape. Coordinates can use percentage values (relative to the element's bounding box) or absolute length units. The shape is formed by connecting points in order and closing back to the first point.

What is silhouette tracing?

Silhouette tracing (or contour tracing) is a computer vision technique that detects the outer boundary of a subject in an image. Our tool analyzes pixel data—either alpha channel transparency for PNGs or luminance thresholds for JPGs—to identify the foreground object's outline and convert it into a simplified polygon suitable for CSS.

What do Threshold and Simplification control?

Threshold determines which pixels count as foreground vs. background based on brightness (0–255). Lower values capture darker areas; higher values include lighter regions. Simplification uses the Douglas-Peucker algorithm to reduce polygon vertices while preserving the essential shape—higher values yield smoother, simpler outlines with fewer points.

Is clip-path responsive?

Yes! When you use percentage-based coordinates in polygon(), the clip-path scales automatically with the element's size. This makes it perfect for responsive web design. All coordinates generated by this tool use percentage values relative to the original image dimensions.

Which browsers support clip-path?

CSS clip-path with polygon() is supported in all modern browsers: Chrome 55+, Firefox 54+, Safari 9.1+, and Edge 79+. It has excellent coverage (over 96% of global users). For older browsers, consider providing a rectangular fallback using @supports queries.

How many vertices should I use?

For web performance, we recommend keeping vertex counts between 15 and 60 points. Too many vertices increase CSS file size and parsing time. The simplification slider helps you find the sweet spot between shape fidelity and code efficiency. Most organic shapes look great with 20–40 points.

Clip-path vs mask – what's the difference?

clip-path creates a hard vector boundary—pixels are either fully visible or fully hidden. CSS mask supports soft edges, alpha gradients, and semi-transparency. Use clip-path for crisp geometric crops and mask for feathered or gradient-based reveals. Both can be animated!

🔧 Related Tools