{"id":305793,"date":"2020-03-29T06:31:53","date_gmt":"2020-03-29T13:31:53","guid":{"rendered":"https:\/\/css-tricks.com\/?page_id=305793"},"modified":"2021-05-10T10:57:16","modified_gmt":"2021-05-10T17:57:16","slug":"mask-image","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/m\/mask-image\/","title":{"rendered":"mask-image"},"content":{"rendered":"\n<p>A <code>mask<\/code> in CSS hides part of the element is applied to. <\/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(star.svg);\n}<\/code><\/pre>\n\n\n\n<p>Say you had an element with a photographic background, and a black-and-white SVG graphic to use as a mask, like this:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1978\" height=\"1696\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/image-and-mask.png?fit=1024%2C878&amp;ssl=1\" alt=\"\" class=\"wp-image-305802\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/image-and-mask.png?w=1978&amp;ssl=1 1978w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/image-and-mask.png?resize=300%2C257&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/image-and-mask.png?resize=1024%2C878&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/image-and-mask.png?resize=768%2C659&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/image-and-mask.png?resize=1536%2C1317&amp;ssl=1 1536w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/image-and-mask.png?resize=1000%2C857&amp;ssl=1 1000w\" sizes=\"(min-width: 735px) 864px, 96vw\" \/><\/figure>\n\n\n\n<p>You could set the image as a <code>background-image<\/code> and the mask as a <code>mask-image<\/code> on the same element, and get something like this:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_xxGQqRp\" src=\"\/\/codepen.io\/anon\/embed\/xxGQqRp?height=500&amp;theme-id=1&amp;slug-hash=xxGQqRp&amp;default-tab=result\" height=\"500\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed xxGQqRp\" title=\"CodePen Embed xxGQqRp\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Masks share a lot in common with backgrounds in that you can size them, position them, and repeat them and such just like backgrounds. See the related properties below. But here&#8217;s another interesting thing about masks that they share with backgrounds: they can be gradients.<\/p>\n\n\n\n<p>Here&#8217;s that same background graphic, only with a <code>linear-gradient<\/code> mask covering it, which makes the top transparent fading the bottom which is not transparent at all:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_XWbyGJL\" src=\"\/\/codepen.io\/anon\/embed\/XWbyGJL?height=450&amp;theme-id=1&amp;slug-hash=XWbyGJL&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed XWbyGJL\" title=\"CodePen Embed XWbyGJL\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>That works because the top of the <code>linear-gradient<\/code> is <code>transparent<\/code>. I would have assumed it would work if it was <code>white<\/code> as well as long as the <code>mask-type<\/code> was <code>luminance<\/code>, but that doesn&#8217;t seem to work in any browser for me. <\/p>\n\n\n\n<p>Speaking of <code>luminance<\/code> masks, that <a href=\"https:\/\/codepen.io\/chriscoyier\/pen\/ZEGmPaz?editors=0100\" rel=\"noopener\">doesn&#8217;t seem to work<\/a> for images-as-masks that are a raster format like JPG or PNG for me. <strong>Update<\/strong>: Reader Micheal&nbsp;Hall writes in with a demo where it might have something to do with using the long-hand properties. <a href=\"https:\/\/codepen.io\/michealhall\/pen\/eYZpKLz?editors=0100\" rel=\"noopener\">Firefox seems to support this concept<\/a> if you only use the shorthand. <\/p>\n\n\n\n<p>But alpha masks seem to work just fine. As in raster graphics that use actual alpha transparency. Like this:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"2494\" height=\"1768\" src=\"https:\/\/i2.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/alpha-graphic.png?fit=1024%2C726&amp;ssl=1\" alt=\"\" class=\"wp-image-305882\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/alpha-graphic.png?w=2494&amp;ssl=1 2494w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/alpha-graphic.png?resize=300%2C213&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/alpha-graphic.png?resize=1024%2C726&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/alpha-graphic.png?resize=768%2C544&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/alpha-graphic.png?resize=1536%2C1089&amp;ssl=1 1536w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/alpha-graphic.png?resize=2048%2C1452&amp;ssl=1 2048w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/alpha-graphic.png?resize=1000%2C709&amp;ssl=1 1000w\" sizes=\"(min-width: 735px) 864px, 96vw\" \/><\/figure>\n\n\n\n<p>And just to prove a point, a color animation you can see through the mask:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_poJqqwJ\" src=\"\/\/codepen.io\/anon\/embed\/poJqqwJ?height=450&amp;theme-id=1&amp;slug-hash=poJqqwJ&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed poJqqwJ\" title=\"CodePen Embed poJqqwJ\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>The <code>mask-image<\/code> property can also be used directly inside SVG elements. Like check out this elliptical mask that also has a blurred filter:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_PwPEJd\" src=\"\/\/codepen.io\/anon\/embed\/PwPEJd?height=280&amp;theme-id=1&amp;slug-hash=PwPEJd&amp;default-tab=result\" height=\"280\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed PwPEJd\" title=\"CodePen Embed PwPEJd\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>It kinda looks like you could snag that SVG mask and apply it to other elements with <code>mask-image: url(#mask);<\/code> but I don&#8217;t find that actually works. It only works within SVG, and has a nasty side effect of entirely erasing an image if used outside the SVG.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-browser-support\">Browser support<\/h3>\n\n<div class=\"caniuse\"><div class=\"caniuse-header\"><p>This browser support data is from <a href=\"http:\/\/caniuse.com\/#feat=css-masks\" rel=\"noopener\">Caniuse<\/a>, which has more detail. A number indicates that browser supports the feature at that version and up.<\/p><\/div><div class=\"caniuse-section\"><h4>Desktop<\/h4><table class=\"browser-support-table\"><thead><tr><th class=\"chrome\"><span>Chrome<\/span><\/th><th class=\"firefox\"><span>Firefox<\/span><\/th><th class=\"ie\"><span>IE<\/span><\/th><th class=\"edge\"><span>Edge<\/span><\/th><th class=\"safari\"><span>Safari<\/span><\/th><\/tr><\/thead><tbody><tr><td class=\"y yep\" title=\"Chrome - \"><span class=\"caniuse-agents-version version\">120<\/span><\/td><td class=\"y yep\" title=\"Firefox - \"><span class=\"caniuse-agents-version version\">53<\/span><\/td><td class=\"n nope\" title=\"IE - \"><span class=\"caniuse-agents-version version\">No<\/span><\/td><td class=\"y yep\" title=\"Edge - \"><span class=\"caniuse-agents-version version\">120<\/span><\/td><td class=\"y yep\" title=\"Safari - \"><span class=\"caniuse-agents-version version\">15.4<\/span><\/td><\/tr><\/table><\/div><div class=\"caniuse-section\"><h4>Mobile \/ Tablet<\/h4><table class=\"browser-support-table\"><thead><tr><th class=\"and_chr\"><span>Android Chrome<\/span><\/th><th class=\"and_ff\"><span>Android Firefox<\/span><\/th><th class=\"android\"><span>Android<\/span><\/th><th class=\"ios_saf\"><span>iOS Safari<\/span><\/th><\/tr><\/thead><tbody><tr><td class=\"y yep\" title=\"Android Chrome - \"><span class=\"caniuse-agents-version version\">124<\/span><\/td><td class=\"y yep\" title=\"Android Firefox - \"><span class=\"caniuse-agents-version version\">125<\/span><\/td><td class=\"y yep\" title=\"Android - \"><span class=\"caniuse-agents-version version\">124<\/span><\/td><td class=\"y yep\" title=\"iOS Safari - \"><span class=\"caniuse-agents-version version\">15.4<\/span><\/td><\/tr><\/table><\/div><\/div>\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 article\" id=\"mini-post-305793\">\n\n  <time datetime=\"2014-12-02\" title=\"Originally published Mar 29, 2020\">\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\/clipping-masking-css\/\">\n      Clipping and Masking in CSS    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=\"https:\/\/css-tricks.com\/tag\/mask\/\" rel=\"tag\">mask<\/a> <a href=\"https:\/\/css-tricks.com\/tag\/mask-image\/\" rel=\"tag\">mask-image<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=\"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&#038;d=retro&#038;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\/author\/chriscoyier\/\">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card beginner\" id=\"mini-post-305793\">\n\n  <time datetime=\"2017-06-07\" title=\"Originally published Mar 29, 2020\">\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\/masking-vs-clipping-use\/\">\n      Masking vs. Clipping: When to Use Each    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=\"https:\/\/css-tricks.com\/tag\/mask\/\" rel=\"tag\">mask<\/a> <a href=\"https:\/\/css-tricks.com\/tag\/mask-image\/\" rel=\"tag\">mask-image<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=\"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&#038;d=retro&#038;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\/author\/sdrasner\/\">\n      Sarah Drasner    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card \" id=\"mini-post-305793\">\n\n  <time datetime=\"2014-12-03\" title=\"Originally published Mar 29, 2020\">\n    <strong>\n                \n      <\/strong>\n\n    on\n\n    Oct 27, 2015  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/lodge\/svg\/33-clipping-masking\/\">\n      33: Clipping and Masking    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=\"https:\/\/css-tricks.com\/tag\/mask\/\" rel=\"tag\">mask<\/a> <a href=\"https:\/\/css-tricks.com\/tag\/mask-image\/\" rel=\"tag\">mask-image<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=\"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&#038;d=retro&#038;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\/author\/chriscoyier\/\">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card \" id=\"mini-post-305793\">\n\n  <time datetime=\"2020-05-13\" title=\"Originally published Mar 29, 2020\">\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\/video-screencasts\/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      <div class=\"tags\">\n      <a href=\"https:\/\/css-tricks.com\/tag\/mask\/\" rel=\"tag\">mask<\/a> <a href=\"https:\/\/css-tricks.com\/tag\/mask-image\/\" rel=\"tag\">mask-image<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=\"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&#038;d=retro&#038;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\/author\/chriscoyier\/\">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card article\" id=\"mini-post-305793\">\n\n  <time datetime=\"2019-03-02\" title=\"Originally published Mar 29, 2020\">\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\/mask-compositing-the-crash-course\/\">\n      Mask Compositing: The Crash Course    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=\"https:\/\/css-tricks.com\/tag\/mask\/\" rel=\"tag\">mask<\/a> <a href=\"https:\/\/css-tricks.com\/tag\/mask-image\/\" rel=\"tag\">mask-image<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=\"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&#038;d=retro&#038;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\/author\/thebabydino\/\">\n      Ana Tudor    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card article\" id=\"mini-post-305793\">\n\n  <time datetime=\"2021-03-23\" title=\"Originally published Mar 29, 2020\">\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\/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      <div class=\"tags\">\n      <a href=\"https:\/\/css-tricks.com\/tag\/mask\/\" rel=\"tag\">mask<\/a> <a href=\"https:\/\/css-tricks.com\/tag\/mask-image\/\" rel=\"tag\">mask-image<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=\"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&#038;d=retro&#038;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\/author\/afiftemani\/\">\n      Temani Afif    <\/a>\n  <\/div>\n\n<\/article>\n    <\/div>\n  \n\n\n<h3 class=\"wp-block-heading\" id=\"h-related-properties\">Related properties<\/h3>\n\n\n    \t\t\n    <div class=\"in-article-cards\">\n      <article class=\"in-article-card \" id=\"mini-post-305793\">\n\n  <time datetime=\"2020-12-18\" title=\"Originally published Mar 29, 2020\">\n    <strong>\n                \n      Almanac\n      <\/strong>\n\n    on\n\n    May 27, 2021  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/m\/mask-clip\/\">\n      mask-clip    <\/a>\n  <\/h3>\n\n      <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/m\/mask-clip\/\" class=\"almanac-example\">\n      <code class=\"language-css\">.element { mask-clip: padding-box; }<\/code>\n    <\/a>\n  \n      <div class=\"tags\">\n      <a href=\"https:\/\/css-tricks.com\/tag\/mask\/\" rel=\"tag\">mask<\/a> <a href=\"https:\/\/css-tricks.com\/tag\/mask-image\/\" rel=\"tag\">mask-image<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/seyedi\/\" aria-label=\"Author page of Mojtaba Seyedi\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/7b9f5e341bcb99d32f140c1f08f32f3a?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/7b9f5e341bcb99d32f140c1f08f32f3a?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\/author\/seyedi\/\">\n      Mojtaba Seyedi    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card \" id=\"mini-post-305793\">\n\n  <time datetime=\"2021-02-03\" title=\"Originally published Mar 29, 2020\">\n    <strong>\n                \n      Almanac\n      <\/strong>\n\n    on\n\n    May 10, 2021  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/m\/mask-mode\/\">\n      mask-mode    <\/a>\n  <\/h3>\n\n      <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/m\/mask-mode\/\" class=\"almanac-example\">\n      <code class=\"language-css\">.element { mask-mode: alpha; }<\/code>\n    <\/a>\n  \n      <div class=\"tags\">\n      <a href=\"https:\/\/css-tricks.com\/tag\/mask\/\" rel=\"tag\">mask<\/a> <a href=\"https:\/\/css-tricks.com\/tag\/mask-image\/\" rel=\"tag\">mask-image<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/seyedi\/\" aria-label=\"Author page of Mojtaba Seyedi\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/7b9f5e341bcb99d32f140c1f08f32f3a?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/7b9f5e341bcb99d32f140c1f08f32f3a?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\/author\/seyedi\/\">\n      Mojtaba Seyedi    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card \" id=\"mini-post-305793\">\n\n  <time datetime=\"2020-10-29\" title=\"Originally published Mar 29, 2020\">\n    <strong>\n                \n      Almanac\n      <\/strong>\n\n    on\n\n    May 10, 2021  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/m\/mask-origin\/\">\n      mask-origin    <\/a>\n  <\/h3>\n\n      <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/m\/mask-origin\/\" class=\"almanac-example\">\n      <code class=\"language-css\">.element { mask-origin: content-box; }<\/code>\n    <\/a>\n  \n      <div class=\"tags\">\n      <a href=\"https:\/\/css-tricks.com\/tag\/mask\/\" rel=\"tag\">mask<\/a> <a href=\"https:\/\/css-tricks.com\/tag\/mask-image\/\" rel=\"tag\">mask-image<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/seyedi\/\" aria-label=\"Author page of Mojtaba Seyedi\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/7b9f5e341bcb99d32f140c1f08f32f3a?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/7b9f5e341bcb99d32f140c1f08f32f3a?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\/author\/seyedi\/\">\n      Mojtaba Seyedi    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card \" id=\"mini-post-305793\">\n\n  <time datetime=\"2020-04-24\" title=\"Originally published Mar 29, 2020\">\n    <strong>\n                \n      Almanac\n      <\/strong>\n\n    on\n\n    May 10, 2021  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/m\/mask-repeat\/\">\n      mask-repeat    <\/a>\n  <\/h3>\n\n      <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/m\/mask-repeat\/\" class=\"almanac-example\">\n      <code class=\"language-css\">.element { mask-repeat: repeat-y; }<\/code>\n    <\/a>\n  \n      <div class=\"tags\">\n      <a href=\"https:\/\/css-tricks.com\/tag\/mask\/\" rel=\"tag\">mask<\/a> <a href=\"https:\/\/css-tricks.com\/tag\/mask-image\/\" rel=\"tag\">mask-image<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=\"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&#038;d=retro&#038;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\/author\/chriscoyier\/\">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card \" id=\"mini-post-305793\">\n\n  <time datetime=\"2020-09-23\" title=\"Originally published Mar 29, 2020\">\n    <strong>\n                \n      Almanac\n      <\/strong>\n\n    on\n\n    Jun 14, 2022  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/m\/mask-size\/\">\n      mask-size    <\/a>\n  <\/h3>\n\n      <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/m\/mask-size\/\" class=\"almanac-example\">\n      <code class=\"language-css\">.element { mask-size: 200px 100px; }<\/code>\n    <\/a>\n  \n      <div class=\"tags\">\n      <a href=\"https:\/\/css-tricks.com\/tag\/mask\/\" rel=\"tag\">mask<\/a> <a href=\"https:\/\/css-tricks.com\/tag\/mask-image\/\" rel=\"tag\">mask-image<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/seyedi\/\" aria-label=\"Author page of Mojtaba Seyedi\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/7b9f5e341bcb99d32f140c1f08f32f3a?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/7b9f5e341bcb99d32f140c1f08f32f3a?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\/author\/seyedi\/\">\n      Mojtaba Seyedi    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card \" id=\"mini-post-305793\">\n\n  <time datetime=\"2021-03-02\" title=\"Originally published Mar 29, 2020\">\n    <strong>\n                \n      Almanac\n      <\/strong>\n\n    on\n\n    May 13, 2021  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/m\/mask-type\/\">\n      mask-type    <\/a>\n  <\/h3>\n\n      <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/m\/mask-type\/\" class=\"almanac-example\">\n      <code class=\"language-css\">.element { mask-type: alpha; }<\/code>\n    <\/a>\n  \n      <div class=\"tags\">\n      <a href=\"https:\/\/css-tricks.com\/tag\/mask\/\" rel=\"tag\">mask<\/a> <a href=\"https:\/\/css-tricks.com\/tag\/mask-image\/\" rel=\"tag\">mask-image<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/seyedi\/\" aria-label=\"Author page of Mojtaba Seyedi\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/7b9f5e341bcb99d32f140c1f08f32f3a?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/7b9f5e341bcb99d32f140c1f08f32f3a?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\/author\/seyedi\/\">\n      Mojtaba Seyedi    <\/a>\n  <\/div>\n\n<\/article>\n    <\/div>\n  \n","protected":false},"excerpt":{"rendered":"<p>The <code>mask<\/code> property in CSS allows you to hide parts of an element. For example, if you have a black and white image, you can apply that as a mask and the black parts will force the element to be transparent on that elements. Masks can also match the alpha transparency of the mask image. <\/p>\n","protected":false},"author":3,"featured_media":0,"parent":13935,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-almanac-single.php","meta":{"_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":""},"tags":[1298,13030],"acf":[],"jetpack-related-posts":[{"id":335415,"url":"https:\/\/css-tricks.com\/almanac\/properties\/m\/mask-type\/","url_meta":{"origin":305793,"position":0},"title":"mask-type","date":"March 2, 2021","format":false,"excerpt":"The mask-type CSS property indicates whether the SVG <mask> element is treated as an alpha mask or a luminance mask. mask { mask-type: alpha; } When the mask layer is an image or a gradient, a mask-mode property can be set on the HTML element to specify the type of\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/s_ADCFB9F0494AC50BE88B2195592C05580BDEAAC4ECC0BBBFE6BE461D40F61FF7_1611418224888_alpha-mask-1.jpg?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":323048,"url":"https:\/\/css-tricks.com\/almanac\/properties\/m\/mask-position\/","url_meta":{"origin":305793,"position":1},"title":"mask-position","date":"October 12, 2020","format":false,"excerpt":"In CSS, the mask-position property specifies the initial position of a mask layer image relative to the mask position area. It works like the background-position property. .element { \u00a0 mask-image: url(\"star.svg\"); \u00a0 mask-position: 20px center; } Masking allows you to display selected parts of an element while hiding the rest.\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":333543,"url":"https:\/\/css-tricks.com\/almanac\/properties\/m\/mask-mode\/","url_meta":{"origin":305793,"position":2},"title":"mask-mode","date":"February 3, 2021","format":false,"excerpt":"The mask-mode CSS property indicates whether the CSS mask layer image is treated as an alpha mask or a luminance mask. .element { mask-image: url(sun.svg); mask-mode: alpha; } Syntax mask-mode: alpha | luminance | match-source The property accepts one keyword value, or a comma-separated list of two or all three\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/01\/s_ADCFB9F0494AC50BE88B2195592C05580BDEAAC4ECC0BBBFE6BE461D40F61FF7_1611418224888_alpha-mask-1.jpg?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":331047,"url":"https:\/\/css-tricks.com\/almanac\/properties\/m\/mask-clip\/","url_meta":{"origin":305793,"position":3},"title":"mask-clip","date":"December 18, 2020","format":false,"excerpt":"The mask-clip CSS property is part of the CSS Masking Module Level 1 specification, and sets the mask painting area. It literally clips the background area of an element and defines which areas show through the mask: border, padding or content box. It\u2019s sort of like putting the frame on\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":321696,"url":"https:\/\/css-tricks.com\/almanac\/properties\/m\/mask-size\/","url_meta":{"origin":305793,"position":4},"title":"mask-size","date":"September 23, 2020","format":false,"excerpt":"In CSS, the mask-size property specifies the size of a mask layer image. In many ways, it works very much like the background-size property. .element { \u00a0 mask-image: url(star.svg); \u00a0 mask-size: 200px 100px; } Masking allows you to display selected parts of an element while hiding the rest. The size\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":307476,"url":"https:\/\/css-tricks.com\/video-screencasts\/185-playing-with-css-masks\/","url_meta":{"origin":305793,"position":5},"title":"#185: Playing with CSS Masks","date":"May 13, 2020","format":false,"excerpt":"Masking in CSS is one way to hide parts of the element and show others. Another is clip-path, but let's not focus on that today. \"Masks are images; Clips are paths\" is one way to think about the difference, although it certainly gets confusing. In this video, we'll look at\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/04\/playing-wuth-svg-masks.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/305793"}],"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\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=305793"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/305793\/revisions"}],"predecessor-version":[{"id":340324,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/305793\/revisions\/340324"}],"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=305793"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=305793"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}