SVG to CSS Shape Converter

What this tool does

Paste an SVG <path> and get back a single CSS declaration — clip-path: path('...') — that clips a plain <div>, <img>, or button into that exact shape. No <svg> markup, no image mask file, no extra DOM: the shape lives entirely in your stylesheet.

This works because CSS's path() function accepts SVG path syntax almost verbatim — the same M/L/C/A/Z command letters and coordinate pairs a d attribute already uses.

How to use it

1. Paste a <path d="..."> tag, a full <svg viewBox="..."><path d="..."/></svg> snippet, or just raw path data (M10 10 L90 90 Z) into the input box. The tool extracts the first <path>'s d value, and the <svg>'s viewBox if one is present.
2. Copy the generated CSS and apply it to any element.
3. Check the Preview — the dashed outline shows the element's full box, so you can see how much of it the shape actually fills.

Why the element needs an explicit size

clip-path: path() coordinates are raw units measured from the element's own top-left corner — not percentages, and not automatically scaled to the element's size the way clip-path: polygon(20% 20%, ...) is. That means the element's width/height has to match the source SVG's viewBox (in the same units, typically read as px) for the path to land where it's supposed to:

.icon {
  width: 24px;   /* matches viewBox="0 0 24 24" */
  height: 24px;
  clip-path: path('M12 2L22 20H2Z');
}

Setting only width and deriving height from aspect-ratio works too, as long as the resulting box is still sized at that same scale — an aspect-ratio alone, at an arbitrary absolute size, does not make the path rescale with it.

Need the shape bigger on screen? Wrap the element and apply transform: scale(...) to the wrapper, rather than changing width/height directly — a bigger box just reveals more empty (clipped-away) space around the same unscaled path.

Browser support, and the shape() alternative

clip-path: path() is supported in every current browser (Chrome, Firefox, Safari, Edge) and has been for years — it's the safe default this tool generates.

A newer CSS-native alternative, clip-path: shape(from ..., ...), is emerging in the CSS Shapes spec. It expresses the same kind of geometry with keyword-named commands (line to, curve to, arc to...) instead of SVG's single-letter syntax, and only accepts absolute coordinates — so converting an arbitrary SVG path (a mix of relative and absolute commands, with implicit repeated commands) into it is a real re-authoring job, not a drop-in swap. It's worth knowing about for browsers that support it, but path() remains the broadly-compatible choice and is what this tool outputs.

FAQ

My preview shows a tiny sliver in the corner, not the whole shape. That almost always means the input had no <svg viewBox="..."> — the tool defaulted to a 100 x 100 box, but the path's coordinates were actually authored for a different size (e.g. a 24 x 24 icon). Paste the full <svg> tag (with its viewBox) instead of just the <path> on its own, so the tool can size the box correctly.

Can I animate between two shapes? Yes — clip-path is animatable, and two path() values with the same number and type of commands interpolate smoothly with a plain CSS transition. Paths with a different command structure won't interpolate cleanly.

Does this affect click targets? No — clicking outside the visible clipped area still hits the element's original (unclipped) box in most browsers, unless you also constrain it with pointer-events or by reworking the layout.

I need a basic shape (circle, polygon, hexagon...), not an arbitrary SVG path. Use the CSS Clip-Path Generator instead — circle, ellipse, inset, and a library of common polygon presets, all with percentage-based coordinates that scale with the element automatically.

I want to inspect or edit the path's individual commands first. The SVG Path Visualizer breaks a d attribute down command by command (move, line, curve, arc) with a labelled preview, and can convert between absolute and relative coordinates — useful for cleaning up a path before converting it here.

Privacy

Everything happens in your browser. Your SVG markup never leaves your machine — the CSS and preview are parsed and generated locally.