Both of these things are used to hide some parts of elements and show other parts. But there are, of course, differences between the two. Differences in what they can do, differences in syntaxes, different technologies involved, the new and the deprecated, and browser support differences. <\/p>\n

And sadly there is quite a bit of outdated information out there. Let’s see if we can sort it out.<\/p>\n

<\/p>\n

The difference between clipping and masking<\/h3>\n

Masks are images; Clips are paths. <\/p>\n

Imagine a square image that is a left-to-right, black-to-white gradient. That can be a mask. The element it is applied to will be transparent (see-through) where there is black in our gradient mask image, and opaque (normal) where there is white. So the final result will be an element that fades in from left to right.<\/p>\n

Clips are always vector paths. Outside the path is transparent, inside the path is opaque. <\/p>\n

I personally found this confusing, because often times you’ll run across a tutorial on masking that uses a masking image that a white vector-looking shape on black, so it is basically doing the same thing a clip. That’s fine, it just confuses things a bit.<\/p>\n

The Old\/Deprecated clip<\/code><\/h3>\n

The first presence of clipping in CSS (other than overflow: hidden;<\/code> trickery) was the clip<\/code> property. (MDN<\/a>).<\/p>\n

It was like this:<\/p>\n

.element {\r\n  clip: rect(10px, 20px, 30px, 40px);\r\n}<\/code><\/pre>\n
Those four values are in the same order as margin\/padding:<\/p>\n
\n
10px from the top of the element<\/li>\n
20px from the right of the element<\/li>\n
30px from the bottom of the element<\/li>\n
40px from the left of the element<\/li>\n<\/ul>\n
The clip<\/code> property is deprecated in CSS<\/strong>, meaning the use of it isn’t recommended because there is a newer, standardized version that browsers will actually focus their efforts. <\/p>\n
There are some strengths of clip: because clip<\/code> shipped in browsers, it will probably always work. And the browser support for it is extremely strong: pretty much every browser ever. Plus I’ve heard animation performance from it trumps newer methods.<\/p>\n
There are two rather significant weaknesses of clip though, which makes not using it easier to swallow:<\/p>\n
\n
clip<\/code> only works if the element is absolutely positioned<\/li>\n
clip<\/code> can only do rectangles.<\/li>\n<\/ul>\n
Pretty limiting. So let’s move on.<\/p>\n
The New clip-path<\/code><\/h3>\n
The new, recommend version of applying clipping to elements in CSS is clip-path<\/code>. You’d think it would be as simple as:<\/p>\n
.element {\r\n  \/* NOPE *\/\r\n  clip-path: rect(10px, 20px, 30px, 40px);\r\n}<\/code><\/pre>\n
That doesn’t work though (even prefixed, anywhere). Eventually, we’ll get rectangle()<\/code>, just not yet<\/a>:<\/p>\n
Postponed rectangle() to level 2<\/p><\/blockquote>\n
The new way to do this is with inset():<\/p>\n
.element {\r\n  clip-path: inset(10px 20px 30px 40px);\r\n  \/* Also can take single values to make all sides the same, or 2 values (vert\/horz), or 3 values (top\/horz\/bottom). *\/\r\n}<\/code><\/pre>\n
Note that there are no commas, and the syntax is different<\/a>, but ultimately does the same kind of things.<\/p>\n
What also does<\/em> work with clip-path<\/code> though (in some browsers), is circles, ellipses, and polygons. Here’s some examples:<\/p>\n
.clip-circle {\r\n  clip-path: circle(60px at center);\r\n  \/* OLD VALUE example: circle(245px, 140px, 50px); *\/\r\n  \/* Yep, even the new clip-path has deprecated stuff. *\/\r\n}\r\n.clip-ellipse {\r\n  clip-path: ellipse(60px 40px at 75px 30px);\r\n  \/* OLD VALUE example: ellipse(245px, 80px, 75px, 30px); *\/\r\n}\r\n.clip-polygon {\r\n  clip-path: polygon(5% 5%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);\r\n  \/* Note that percentages work as well as px *\/\r\n}<\/code><\/pre>\n
See the Pen clip-path examples<\/a> by Chris Coyier (@chriscoyier<\/a>) on CodePen<\/a>.<\/p>\n
Polygon is pretty powerful. Ryan Scherf posted a tutorial here<\/a> on CSS-Tricks on using it programmatically to produce a sketchy effect. <\/p>\n
I highly recommend playing with it through Bennet Feely’s Clippy<\/a>:<\/p>\n
<\/a><\/figure>\n
Theoretically, this is what clip-path<\/code> will support (known as “basic shapes<\/a>“):<\/p>\n
.clip-examples {\r\n\r\n  clip-path: rectangle(x, y, width, height, rounded-x, rounded-y)\r\n          \r\n  clip-path: inset-rectangle(from top, from right, from bottom, from left, rounded-x, rounded-y)\r\n  \/* Looks like this is what rect() used to be like with clip *\/\r\n  \/* Will replace inset(), I suppose *\/\r\n\r\n  clip-path: polygon(a, bunch, of, points)\r\n  clip-path: circle(radius at x, y)\r\n  clip-path: ellipse(radius-x, radius-y at x, y)\r\n\r\n}<\/code><\/pre>\n
I can’t seem to find info if path()<\/code> will ever be a valid value.<\/p>\n
Using clip-path with an SVG-defined <clipPath><\/h4>\n
You don’t have to define the clip-path value right in CSS, it can reference a <clipPath><\/code> element defined in SVG. Here’s what that looks like:<\/p>\n
<img class=\"clip-svg\" src=\"harry.jpg\" alt=\"Harry Potter\">\r\n\r\n<svg width=\"0\" height=\"0\">\r\n  <defs>\r\n    <clipPath id=\"myClip\">\r\n      <circle cx=\"100\" cy=\"100\" r=\"40\" \/>\r\n      <circle cx=\"60\" cy=\"60\" r=\"40\" \/>\r\n    <\/clipPath>\r\n  <\/defs>\r\n<\/svg><\/code><\/pre>\n
.clip-svg {\r\n  clip-path: url(#myClip);\r\n}<\/code><\/pre>\n
Demo:<\/p>\n
See the Pen clip-path examples<\/a> by Chris Coyier (@chriscoyier<\/a>) on CodePen<\/a>.<\/p>\n
Sara Soueidan has a demo<\/a> of this in action as well. <\/p>\n
There is a rather significant issue with using SVG-defined clip paths though: some browsers pin them to the upper left of the document. Here’s a demo<\/a> of that issue:<\/p>\n