{"id":340283,"date":"2021-05-10T11:02:28","date_gmt":"2021-05-10T18:02:28","guid":{"rendered":"https:\/\/css-tricks.com\/?page_id=340283"},"modified":"2022-06-14T10:07:52","modified_gmt":"2022-06-14T17:07:52","slug":"mask-composite","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/m\/mask-composite\/","title":{"rendered":"mask-composite"},"content":{"rendered":"\n<p>The <code>mask-composite<\/code> CSS property allows us to combine a <a href=https://css-tricks.com/"https:////css-tricks.com//almanac//properties//m//mask-image///">mask layer image<\/a> with the mask layers below it.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.element {\n  mask-composite: subtract;\n}<\/code><\/pre>\n\n\n\n<p>When there are multiple mask layer images, they need to be composited into one final mask layer.&nbsp;mask-compositespecifies&nbsp;how mask layers&nbsp;with different shapes are combined into a single image.&nbsp;Think of it like combining layers in an image editing app, like Photoshop, Figma or Sketch, where you have controls that set how the layers are combined.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video autoplay controls loop muted src=https://css-tricks.com/"https:////css-tricks.com//wp-content//uploads//2021//05//mask-composite-sketch.mp4/" playsinline><\/video><figcaption>Combining two layers in Sketch<\/figcaption><\/figure>\n\n\n\n<p>Or, another way to think about it:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=https://css-tricks.com/"https:////css-tricks.com//wp-content//uploads//2021//05//mask-composite-subtract.svg/" alt=\"Circle plus rectangle equals a circle with the shape of a rectangle cut out of it.\" class=\"wp-image-340284\"\/><figcaption>The second layer (rectangle) is subtracted from the first layer (circle).<\/figcaption><\/figure>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-syntax\">Syntax<\/h3>\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">mask-composite: &lt;compositing-operator>#\nwhere\n&lt;compositing-operator> = add | subtract | intersect | exclude<\/code><\/pre>\n\n\n\n<ul class=\"ticss-98e7b928\"><li><strong>Initial:<\/strong> <code>add<\/code><\/li><li><strong>Applies to:<\/strong> All elements. In SVG, it applies to container elements without the <code>&lt;defs&gt;<\/code> element and all graphics elements<\/li><li><strong>Inherited:<\/strong> no<\/li><li><strong>Computed value:<\/strong> as specified<\/li><li><strong>Animation type:<\/strong> discrete<\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-values\">Values<\/h3>\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">\/* Keyword values *\/\nmask-composite: add;\nmask-composite: subtract;\nmask-composite: intersect;\nmask-composite: exclude;\n\n\/* Global values *\/\nmask-composite: inherit;\nmask-composite: initial;\nmask-composite: unset;<\/code><\/pre>\n\n\n\n<p>For the composition, the mask layer image that the <code>mask-composite<\/code> value is applied to is the <strong>source<\/strong>, while all mask layers below it are the <strong>destination<\/strong>.<\/p>\n\n\n\n<ul><li><strong><code>add<\/code>:<\/strong> The default value. The mask image layer closer to the user (source) is placed on top of the next mask image layer (destination). The combination is the final mask layer.<\/li><li><strong><code>subtract<\/code>:<\/strong> The mask image layer closer to the user is placed where it falls outside of the next mask image layer. In other words, the final combination is portions of the destination that <strong>don\u2019t<\/strong> overlap the source.<\/li><li><strong><code>intersect<\/code>:<\/strong> The portions of source that overlap the destination replace the destination. In other words, the final combination is portions of the destination that overlap the source.<\/li><li><strong><code>exclude<\/code>:<\/strong> The non-overlapping regions of source and destination are combined.<\/li><li><strong><code>initial<\/code>:<\/strong> Applies the property\u2019s default value, <code>add<\/code>.<\/li><li><strong><code>inherit<\/code>:<\/strong> Adopts the <code>mask-composite<\/code> value of the parent.<\/li><li><strong><code>unset<\/code>:<\/strong> Removes the current <code>mask-composite<\/code> from the element.<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=https://css-tricks.com/"https:////css-tricks.com//wp-content//uploads//2021//05//mask-composite-value-examples.svg/" alt=\"\" class=\"wp-image-340289\"\/><\/figure>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-example\">Example<\/h3>\n\n\n<p>In the following example, two mask image layers are combined using <code>exclude<\/code> value:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"5\"><code markup=\"tt\">img {\n  mask-image: url(circle.svg), url(plus.svg);\n  mask-size: 150px, 200px;\n  mask-position: center;\n  mask-composite: exclude;\n}<\/code><\/pre>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_YzNBGwP\" src=https://css-tricks.com/"////codepen.io//anon//embed//YzNBGwP?height=650&amp;theme-id=1&amp;slug-hash=YzNBGwP&amp;default-tab=result\%22 height=\"650\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed YzNBGwP\" title=\"CodePen Embed YzNBGwP\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p class=\"is-style-explanation\">At the time of writing, this example works only in Firefox.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-using-multiple-values\">Using multiple values<\/h3>\n\n\n<p>This property can take a comma-separated list of values for mask compositing and the number of values is one value less than the number of mask images specified using <code><a href=https://css-tricks.com/"http:////tympanus.net//codrops//css_reference//mask-image/" rel=\"noopener\">mask-image<\/a><\/code>.<\/p>\n\n\n\n<p>In the following example:<\/p>\n\n\n\n<ul><li>the first value specifies the composite operation of the second image with the third one, and<\/li><li>the second value is used to perform the composite operation of the first mask image with the result obtained from the first operation.<\/li><\/ul>\n\n\n\n<p>And so on for any number of mask layer images. Remember, the first image specified is placed on top of the ones specified after it.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.element {\n  mask-image: url(circle.png), url(star.png), url(square.png);\n  mask-composite: exclude, subtract;\n}<\/code><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-browser-support\">Browser support<\/h3>\n\n\n<figure class=\"wp-block-table ticss-2969c85c\"><table class=\"has-fixed-layout\"><thead><tr><th class=\"has-text-align-center\" data-align=\"center\">IE<\/th><th class=\"has-text-align-center\" data-align=\"center\">Edge<\/th><th class=\"has-text-align-center\" data-align=\"center\">Firefox<\/th><th class=\"has-text-align-center\" data-align=\"center\">Chrome<\/th><th class=\"has-text-align-center\" data-align=\"center\">Safari<\/th><th class=\"has-text-align-center\" data-align=\"center\">Opera<\/th><\/tr><\/thead><tbody><tr><td class=\"has-text-align-center\" data-align=\"center\">No<\/td><td class=\"has-text-align-center\" data-align=\"center\">No *<\/td><td class=\"has-text-align-center\" data-align=\"center\">53+<\/td><td class=\"has-text-align-center\" data-align=\"center\">No<\/td><td class=\"has-text-align-center\" data-align=\"center\">No<\/td><td class=\"has-text-align-center\" data-align=\"center\">No<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<figure class=\"wp-block-table ticss-1679a4e0\"><table class=\"has-fixed-layout\"><thead><tr><th class=\"has-text-align-center\" data-align=\"center\">Android Chrome<\/th><th class=\"has-text-align-center\" data-align=\"center\">Android Firefox<\/th><th class=\"has-text-align-center\" data-align=\"center\">Android Browser<\/th><th class=\"has-text-align-center\" data-align=\"center\">iOS Safari<\/th><th class=\"has-text-align-center\" data-align=\"center\">Opera Mobile<\/th><\/tr><\/thead><tbody><tr><td class=\"has-text-align-center\" data-align=\"center\">No<\/td><td class=\"has-text-align-center\" data-align=\"center\">87+<\/td><td class=\"has-text-align-center\" data-align=\"center\">No<\/td><td class=\"has-text-align-center\" data-align=\"center\">No<\/td><td class=\"has-text-align-center\" data-align=\"center\">No<\/td><\/tr><\/tbody><\/table><figcaption>Source: <a href=https://css-tricks.com/"https:////caniuse.com//mdn-css_properties_mask-composite/" rel=\"noopener\">caniuse<\/a><\/figcaption><\/figure>\n\n\n\n<p class=\"is-style-explanation\">* Edge 18 supported <code>mask-composite<\/code> before adopting the Blink rendering engine.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-more-information\">More information<\/h3>\n\n\n    \t\t\n    <div class=\"in-article-cards\">\n      <article class=\"in-article-card articles\" id=\"mini-post-340283\">\n\n  <time datetime=\"2014-12-02\" title=\"Originally published May 10, 2021\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Nov 6, 2016  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//clipping-masking-css///">\n      Clipping and Masking in CSS    <\/a>\n  <\/h3>\n\n  \n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//chriscoyier///" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//8081b26e05bb4354f7d65ffc34cbbd67?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//chriscoyier///">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card beginner\" id=\"mini-post-340283\">\n\n  <time datetime=\"2017-06-07\" title=\"Originally published May 10, 2021\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Jun 7, 2017  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//masking-vs-clipping-use///">\n      Masking vs. Clipping: When to Use Each    <\/a>\n  <\/h3>\n\n  \n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//sdrasner///" aria-label=\"Author page of Sarah Drasner\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//48cfd8342f9b9e5b7970f63afb0a8ee3?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/48cfd8342f9b9e5b7970f63afb0a8ee3?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//sdrasner///">\n      Sarah Drasner    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card \" id=\"mini-post-340283\">\n\n  <time datetime=\"2014-12-03\" title=\"Originally published May 10, 2021\">\n    <strong>\n                \n      <\/strong>\n\n    on\n\n    Oct 27, 2015  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//lodge//svg//33-clipping-masking///">\n      33: Clipping and Masking    <\/a>\n  <\/h3>\n\n  \n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//chriscoyier///" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//8081b26e05bb4354f7d65ffc34cbbd67?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//chriscoyier///">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card \" id=\"mini-post-340283\">\n\n  <time datetime=\"2020-05-13\" title=\"Originally published May 10, 2021\">\n    <strong>\n                \n      Video\n      <\/strong>\n\n    on\n\n    May 13, 2020  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//videos//185-playing-with-css-masks///">\n      #185: Playing with CSS Masks    <\/a>\n  <\/h3>\n\n      <time>\u25b6 Running Time: <span>23:32<\/span><\/time>\n  \n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//chriscoyier///" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//8081b26e05bb4354f7d65ffc34cbbd67?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//chriscoyier///">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card articles\" id=\"mini-post-340283\">\n\n  <time datetime=\"2019-03-02\" title=\"Originally published May 10, 2021\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Mar 2, 2019  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//mask-compositing-the-crash-course///">\n      Mask Compositing: The Crash Course    <\/a>\n  <\/h3>\n\n  \n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//thebabydino///" aria-label=\"Author page of Ana Tudor\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//bee436794e066a5423040cf673c7506f?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/bee436794e066a5423040cf673c7506f?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//thebabydino///">\n      Ana Tudor    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card articles\" id=\"mini-post-340283\">\n\n  <time datetime=\"2021-03-23\" title=\"Originally published May 10, 2021\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Mar 23, 2021  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//image-fragmentation-effect-with-css-masks-and-custom-properties///">\n      Image Fragmentation Effect With CSS Masks and Custom Properties    <\/a>\n  <\/h3>\n\n  \n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//afiftemani///" aria-label=\"Author page of Temani Afif\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//2c12e74c8162614e08a31d704ed9e193?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/2c12e74c8162614e08a31d704ed9e193?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//afiftemani///">\n      Temani Afif    <\/a>\n  <\/div>\n\n<\/article>\n    <\/div>\n  \n","protected":false},"excerpt":{"rendered":"<p>The mask-composite CSS property allows us to combine a mask layer image with the mask layers below it. When there [&hellip;]<\/p>\n","protected":false},"author":4997,"featured_media":0,"parent":13935,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-almanac-single.php","meta":{"_acf_changed":false,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","_share_on_mastodon":"0","_share_on_mastodon_status":"%title% %permalink%"},"tags":[],"acf":[],"share_on_mastodon":{"url":"","error":""},"jetpack_sharing_enabled":true,"jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/340283"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/4997"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=340283"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/340283\/revisions"}],"predecessor-version":[{"id":366437,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/340283\/revisions\/366437"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13935"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=340283"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=340283"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}