How to css clip-path vs svg mask: when to use which
- Step 1Identify whether you need soft edges — If your cutout needs feathering, blur, or gradient transparency at the edge, use a mask. If you need a hard-edged cutout, use clip-path. Clip-path cannot produce soft edges.
- Step 2Choose the mask type — For SVG masking: use the mask element with a radial or linear gradient fill for vignette effects. For CSS masking: use mask-image with a gradient or image URL. Both support alpha and luminance masking modes.
- Step 3Optimize for performance — CSS clip-path polygon() is handled by the GPU compositor and does not trigger paint. SVG masks and CSS mask-image trigger rasterization — apply will-change: transform to promote masked elements to their own compositor layer.
Frequently asked questions
Can clip-path produce rounded corners?+
Yes. Use clip-path: inset(0 round 16px) for rounded rectangle clips, or clip-path: circle(50%) for circular clips. For arbitrary curved shapes, use clip-path: path('M...') with SVG path syntax (supported in Chrome and Firefox; Safari as of 2024).
Can SVG masks be applied to HTML elements?+
Yes, with the CSS mask-image property pointing to an SVG mask: mask-image: url(#my-mask). However, browser support for referencing inline SVG mask elements from CSS is inconsistent. The most reliable approach is a CSS gradient or external SVG image for mask-image.
Does clip-path affect click/touch hit areas?+
Yes. Elements clipped with clip-path are not interactive outside the clipped area by default. Clicks on the visually hidden region pass through to elements beneath. If you need the full element to remain interactive despite visual clipping, use overflow: hidden or opacity tricks instead.
Is there a performance difference between clip-path and overflow: hidden?+
Yes. overflow: hidden triggers a new stacking context and can cause paint invalidations in some layouts. clip-path polygon() is GPU-composited and avoids paint in most cases. For animated cutouts, clip-path generally outperforms overflow: hidden especially on mobile.
Privacy first
Every JAD SVG tool runs entirely in your browser using the DOM API and Canvas. Your SVG files never leave your device — verified by zero outbound network requests during processing.