clip<\/code> property. You create the clip path by using the clip-path<\/code> property.<\/p>\n\n\n\n![\"Graphic](\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2016\/08\/css-svg-clipping-masking-clipping-graphic.jpg\")
<\/figure>\n\n\n\n
\n\n\n\nNote: Don’t Try This on Your Live Site<\/h3>\n\n\n\n
Remember: You should never change the code directly on your site, to ensure nothing breaks. Our free local development app, Local<\/a>, will help you set up a test environment where you can safely follow along this tutorial.<\/p>\n\n\n\n
\n\n\n\nClipping in Action<\/h3>\n\n\n\n
Clips are always vector paths. It can be confusing to understand, but anything outside the path will be hidden, while anything inside the path will be visible. To get a better understanding and to test this out yourself, see the sample on CodePen<\/a>.<\/p>\n\n\n\n![\"Screenshot](\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2016\/08\/css-svg-clipping-masking-triangle-example.jpg\")
<\/figure>\n\n\n\nHere is a snippet of the HTML structure from the example:<\/p>\n\n\n\n
[html]\n\n&amp;amp;lt;svg class=&quot;clip-svg&quot;&amp;amp;gt;\n\t&amp;amp;lt;defs&amp;amp;gt;\n\t\t&amp;amp;lt;clipPath id=&quot;polygon-clip-triangle-equilateral&quot; clipPathUnits=&quot;objectBoundingBox&quot;&amp;amp;gt;\n\t\t\t&amp;amp;lt;polygon points=&quot;0 0.87, 0.5 0, 0.5 0, 1 0.87&quot; \/&amp;amp;gt;\n\t\t&amp;amp;lt;\/clipPath&amp;amp;gt;\n\t&amp;amp;lt;\/defs&amp;amp;gt;\n&amp;amp;lt;\/svg&amp;amp;gt;\n\n[\/html]<\/pre>\n\n\n\nThis is the CSS to make the clipping happen:<\/p>\n\n\n\n
[css]\n\n.polygon-clip-triangle-equilateral {\n\t-webkit-clip-path: polygon(0% 87%, 50% 0%, 50% 0%, 100% 87%);\n\tclip-path: polygon(0% 87%, 50% 0%, 50% 0%, 100% 87%);\n\t-webkit-clip-path: url(&quot;#polygon-clip-triangle-equilateral&quot;);\n\tclip-path: url(&quot;#polygon-clip-triangle-equilateral&quot;);\n}\n\n[\/css]<\/pre>\n\n\n\nYou can see where the clipPath<\/code> id is being referenced in the HTML and how it uses the clip-path<\/code> URL to do the clipping.<\/p>\n\n\n\nClippy Tool<\/strong><\/p>\n\n\n\nClippy<\/a> is a great tool to generate CSS clip paths. There are a wide variety of starter shapes and sizes that can be customized.<\/p>\n\n\n\n![\"screenshot](\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2016\/08\/css-svg-clipping-masking-clippy.png\")
<\/figure>\n\n\n\nMasking Basics<\/h2>\n\n\n\n
Masking is done using a PNG image, CSS gradient, or an SVG element to hide part of an image or another element on the page. We will be focusing on SVG graphics, but keep in mind this can be done with other image types or styles.<\/p>\n\n\n\n
The Mask Property and Mask Element<\/h3>\n\n\n\n
Just a refresher to help visualize, it\u2019s important to keep in mind that the masked element is the \u201coriginal\u201d (before mask is applied) image. You may not want to see the whole image, so hiding parts of it is done with the CSS mask<\/code> property. The mask<\/code> is the CSS shorthand for a group of individual properties, which we\u2019ll dive into in a second. The SVG <mask><\/code> element is used inside an SVG graphic to add masking effects. In this example, the mask is a circle and there is also a gradient applied.<\/p>\n\n\n\nUsing the SVG Mask Element on an SVG Graphic<\/h3>\n\n\n\n
To get a feel for the SVG <mask><\/code> we will be masking with an SVG graphic.<\/p>\n\n\n\nIt might be a bit complex at a first glance, but it all works together to mask the underlying image. We have an actual image as a background, so where does the SVG come into play? Unlike the clipping examples, this background image is technically inside of an SVG element. We\u2019ll use CSS to apply this mask to the image. Properties will come from the SVG mask element, and we\u2019ll give it the id of masked-element<\/code> in our CSS.<\/p>\n\n\n\nTo see this in action, check out this Codepen sample<\/a>. Here\u2019s the working code for the masked SVG graphic:<\/p>\n\n\n\n[html]\n\n&amp;amp;lt;svg class=&quot;masked-element&quot; width=&quot;300&quot; height=&quot;300&quot; viewBox=&quot;0 0 300 300&quot;&amp;amp;gt;\n\t&amp;amp;lt;image xlink:href=&quot;image link&quot; width=&quot;300px&quot; height=&quot;300px&quot; \/&amp;amp;gt;\n&amp;amp;lt;\/svg&amp;amp;gt;\n\n[\/html]<\/pre>\n\n\n\n![\"screenshot](\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2016\/08\/css-svg-clipping-masking-masked-outline.png\")
if you go to the Inspector, you can see the boundaries for the masked element. The circular shape is created with a mask.<\/figcaption><\/figure>\n\n\n\nWith this CSS, we are specifying where to find the mask. It will look for the ID of #mask-this:<\/code><\/p>\n\n\n\n[css]\n\/* Here\u2019s the CSS for masking *\/\n.masked-element image {\n mask: url(#mask1);\n}\n\n[\/css]<\/pre>\n\n\n\n![\"a](\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2016\/08\/updated-css-svg-clipping-masking-svg-mask-1024x472.png\")
<\/figure>\n\n\n\nNotice a gradient in the circle shape? A gradient has been applied, as well as setting the circle shape for the mask.<\/p>\n\n\n\n
[html]\n\n&amp;amp;lt;svg class=&quot;svg-mask&quot;&amp;amp;gt;\n \t&amp;amp;lt;defs&amp;amp;gt;\n \t\t&amp;amp;lt;mask id=&quot;mask1&quot; maskUnits=&quot;objectBoundingBox&quot; maskContentUnits=&quot;objectBoundingBox&quot;&amp;amp;gt;\n &amp;amp;lt;linearGradient id=&quot;grad&quot; gradientUnits=&quot;objectBoundingBox&quot; x2=&quot;0&quot; y2=&quot;1&quot;&amp;amp;gt;\n &amp;amp;lt;stop stop-color=&quot;white&quot; offset=&quot;0&quot;\/&amp;amp;gt;\n &amp;amp;lt;stop stop-color=&quot;green&quot; stop-opacity=&quot;0&quot; offset=&quot;1&quot;\/&amp;amp;gt;\n &amp;amp;lt;\/linearGradient&amp;amp;gt;\n &amp;amp;lt;circle cx=&quot;0.50&quot; cy=&quot;0.50&quot; r=&quot;0.50&quot; id=&quot;circle&quot; fill=&quot;url(#grad)&quot;\/&amp;amp;gt;\n \t&amp;amp;lt;\/mask&amp;amp;gt;\n \t&amp;amp;lt;\/defs&amp;amp;gt;\n&amp;amp;lt;\/svg&amp;amp;gt;\n\n[\/html]<\/pre>\n\n\n\nSVG Text Masking<\/h2>\n\n\n\n
Text masking can do some pretty cool things, such as showing an image through a text block. The good news is that a text element can be used inside of an SVG mask. As browser support increases in the future, this could be a really interesting way to combine images and typography.<\/p>\n\n\n\n![\"an](\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2016\/08\/css-svg-clipping-masking-text-mask.png\")
<\/figure>\n\n\n\nHere\u2019s a basic explanation of what is going on. There is an SVG text element inside the SVG mask. We\u2019ve specified the RGB value for white, which creates the oval area around the masked text. Anything behind the oval area shows through the text, giving a cut-out feel.<\/p>\n\n\n\n
[html]\n\n&amp;amp;lt;div class=&quot;text-wrap&quot;&amp;amp;gt;\n &amp;amp;lt;svg class=&quot;text-demo&quot; viewBox=&quot;0 0 600 400&quot; width=&quot;600&quot; height=&quot;400&quot;&amp;amp;gt;\n &amp;amp;lt;defs&amp;amp;gt;\n &amp;amp;lt;mask id=&quot;myMask&quot;&amp;amp;gt;\n &amp;amp;lt;rect width=&quot;100%&quot; height=&quot;100%&quot; fill=&quot;#fff&quot; \/&amp;amp;gt;\n &amp;amp;lt;text x=&quot;50&quot; y=&quot;200&quot; id=&quot;myText&quot;&amp;amp;gt;My Text&amp;amp;lt;\/text&amp;amp;gt;\n &amp;amp;lt;text x=&quot;125&quot; y=&quot;293&quot; id=&quot;mySubtext&quot;&amp;amp;gt;SVG&amp;amp;lt;\/text&amp;amp;gt;\n &amp;amp;lt;\/mask&amp;amp;gt;\n &amp;amp;lt;\/defs&amp;amp;gt;\n &amp;amp;lt;ellipse class=&quot;masked&quot; cx=&quot;300&quot; cy=&quot;200&quot; rx=&quot;300&quot; ry=&quot;150&quot; fill=&quot;rgba(255, 255, 255, 0.8)&quot; \/&amp;amp;gt;\n &amp;amp;lt;\/svg&amp;amp;gt;\n &amp;amp;lt;\/div&amp;amp;gt;\n\n[\/html]<\/pre>\n\n\n\n[css]\n\n\/* Here\u2019s the CSS for text element *\/\n#myText {\nfont-size: 125px;\nfont-style: bold;\nfill: #000;\n}\n\n\/* Here\u2019s the CSS for masking *\/\n.masked {\nmask: url(&quot;#myMask&quot;);\n}\n\n[\/css]<\/pre>\n\n\n\nTo fully understand, it\u2019s helpful to play around and experiment with the code. Try changing colors, changing text, and adjusting sizes in this Codepen<\/a>.<\/p>\n\n\n\nThe Mask-Image Property<\/h3>\n\n\n\n
An image can be declared and the mask-image<\/code> can be set to a URL value. The mask-image<\/code> can be a PNG, SVG, or a reference to an SVG mask<\/code> element, like I demonstrated in the previous example.<\/p>\n\n\n\nBecause masking is used to partially or fully hide portions of an object or element, first you\u2019ll want an image link to a file for the element that is going to be masked. Here\u2019s what that image looks like. It\u2019s colorful to make it very apparent which part the mask is showing and hiding.<\/p>\n\n\n\n
[css]\n\n&amp;amp;lt;img class=&quot;mask-img example-mask&quot; src=&quot;https:\/\/linktoimage.com\/img\/image-example.jpg&quot; alt=&quot;Masked image&quot;&amp;amp;gt;\n\n[\/css]<\/pre>\n\n\n\n![\"an](\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2016\/08\/original-image.png\")
<\/figure>\n\n\n\nSo far there\u2019s been a lot of SVG code, but this example is slightly different since there is going to be a raster image masked with an SVG.<\/p>\n\n\n\n
[css]\n\n.example-mask {\n mask-image: url(https:\/\/linktoimage.com\/browser-icon-01.svg);\n webkit-mask-image: url(https:\/\/linktoimage.com\/browser-icon-01.svg);\n mask-mode: alpha;\n webkit-mask-mode: alpha;\n mask-repeat: no-repeat;\n webkit-mask-repeat: no-repeat;\n mask-size: 200px;\n webkit-mask-size: 200px;\n mask-position: center;\n webkit-mask-position: center;\n}\n\n[\/css]<\/pre>\n\n\n\nThe mask-image<\/code> property is where the mask shape will be declared. In this case, the mask image is an SVG graphic. Having the URL link included is how the mask is built.<\/p>\n\n\n\n![\"an](\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2016\/08\/original-svg-and-mask.png\")
<\/figure>\n\n\n\nHere it is on Codepen<\/a>.<\/p>\n\n\n\nCombining Multiple Mask Images<\/h3>\n\n\n\n
Just when you thought masking couldn\u2019t get any better, there is the option to set more than one mask image layer. All you need to do is add two URL values (or more if you\u2019re feeling ambitious) separated by a comma.<\/p>\n\n\n\n
To expand on the simple mask from above, there will be an arrow added to the original graphic. Here\u2019s how two masks are combined.<\/p>\n\n\n\n
[css]\n\n.combined-mask {\n mask-image: url(https:\/\/linktoimage.com\/arrow-01.svg), url(https:\/\/linktoimage.com\/browser-icon-01.svg);\n webkit-mask-image: url(https:\/\/linktoimage.com\/arrow-01.svg), url(https:\/\/linktoimage.com\/browser-icon-01.svg);\n}\n\n[\/css]<\/pre>\n\n\n\n![\"a](\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2016\/08\/combined-mask.png\")
<\/figure>\n\n\n\nAll you have to do is add the two values (with a comma) and now there are two combined masks, making the masking possibilities endless.<\/p>\n\n\n\n
Here it is on Codepen<\/a>.<\/p>\n\n\n\nCreate a Simple Gradient with mask-image<\/code><\/h3>\n\n\n\nNot all masks have to be a complex shape. Sometimes it\u2019s not a particular image that is the mask, but rather a simple mask like a gradient. If you\u2019re looking for a quick way to achieve this, the mask-image<\/code> property is an option, which is pretty easy to implement.<\/p>\n\n\n\nIn this example, there was a class applied to a gradient set as the mask-image<\/code> property. With this simple declaration, it was easy to create a gradient mask on the image.<\/p>\n\n\n\n[css]\n\nmask-image: linear-gradient(black, white, transparent);\n-webkit-mask-image: linear-gradient(black, white, transparent);\n\n[\/css]<\/pre>\n\n\n\n![\"the](\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2016\/08\/gradient-mask.png\")
<\/figure>\n\n\n\nSee this on Codepen<\/a>.<\/p>\n\n\n\nThe Mask-Repeat Property<\/h3>\n\n\n\n
Once you\u2019ve created one mask, it\u2019s pretty easy to make more. This really comes in handy if you\u2019re looking to make a custom pattern. The mask-repeat property allows for repetition of the mask. If you\u2019ve ever made a tiled background before, this is similar to that.<\/p>\n\n\n\n
There are a few important things to keep in mind, like sizing and the type of mask-repeat that needs to be declared so the perfect pattern is created.<\/p>\n\n\n\n
The mask-size<\/code> is pretty easy to visualize, especially with the set pixel value here.<\/p>\n\n\n\n[css]\n\nmask-size: 200px;\nwebkit-mask-size: 200px;\n\n[\/css]<\/pre>\n\n\n\n![\"the](\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2016\/08\/mask-repeat.png\")
<\/figure>\n\n\n\nThere are a few more mask-repeat options if you\u2019re looking for a different effect for the pattern:<\/p>\n\n\n\n
\nrepeat-x<\/code> repeats along the x coordinate.<\/li>\n\n\n\nRepeat-y<\/code> repeats down the y coordinate.<\/li>\n\n\n\nspace<\/code> repeats and spreads out in the available area.<\/li>\n\n\n\nround<\/code> repeats a number of times across the available area (scaling will help it fill the space if needed)<\/li>\n<\/ul>\n\n\n\nBrowser Support<\/h2>\n\n\n\n
Before committing to this new way of working with graphics, it\u2019s important to note that browser support is not consistent with clipping and masking. Clipping is more supported than masking, but Internet Explorer does not fully support clipping. <\/p>\n\n\n\n
Current browser support for CSS masks is also fairly limited, so it\u2019s suggested to be used as an enhancement on a few decorative elements. That way, if it is not supported by the user\u2019s browser, it does not affect the content viewing experience.<\/p>\n\n\n\n
To test things out and see if your masks and clippings are supported, we\u2019d recommend making a JSFiddle<\/a> or Codepen<\/a> and then trying it in different browsers. Browser support has increased in the recent years, and it will eventually get to a point where it will be fully-supported. <\/p>\n\n\n\nDon\u2019t let the limitations get you down\u2014it\u2019s always good to be ahead of the game and once support is more mainstream, you will know exactly how to revolutionize your graphics. When in doubt, be sure to reference the trusted Can I Use<\/a>.<\/p>\n\n\n\n
\n\n\n\nAfter experimenting with these examples, this should provide a good introduction to masking and clipping. Although browser support is limited at this time, this will likely become a mainstream practice in the future. <\/p>\n\n\n\n
It\u2019s always fun to think about how these techniques can be used to create interesting visuals. The future of web graphics will make us less dependent on image editors and allow for more effective ways to create and modify imagery directly in the browser.<\/p>\n\n\n\n