{"id":321696,"date":"2020-09-23T15:34:21","date_gmt":"2020-09-23T22:34:21","guid":{"rendered":"https:\/\/css-tricks.com\/?page_id=321696"},"modified":"2022-06-14T10:47:01","modified_gmt":"2022-06-14T17:47:01","slug":"mask-size","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/m\/mask-size\/","title":{"rendered":"mask-size"},"content":{"rendered":"\n<p>In CSS, the <code>mask-size<\/code> property specifies the size of a mask layer image. In many ways, it works very much like the <code><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/b\/background-size\/\">background-size<\/a><\/code> property.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"3\"><code markup=\"tt\">.element {\n\u00a0 mask-image: url(star.svg);\n\u00a0 mask-size: 200px 100px;\n}<\/code><\/pre>\n\n\n\n<p>Masking allows you to display selected parts of an element while hiding the rest. The size of the mask is defined by the <code>mask-size<\/code> property.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p>In the following demo you can play around with the size of the mask layer image:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_yLOEjXZ\" src=\"\/\/codepen.io\/anon\/embed\/yLOEjXZ?height=850&amp;theme-id=1&amp;slug-hash=yLOEjXZ&amp;default-tab=result\" height=\"850\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed yLOEjXZ\" title=\"CodePen Embed yLOEjXZ\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\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-size: &lt;bg-size> = [ &lt;length-percentage> = &lt;length> | &lt;percentage> | auto ]{1,2} | cover | contain<\/code><\/pre>\n\n\n\n<ul class=\"ticss-e916a65e\"><li><strong>Initial value:<\/strong> auto<\/li><li><strong>Applies to:<\/strong> All elements. In SVG, it applies to container elements excluding the <code>&lt;defs&gt;<\/code> element, all graphics elements and the <code>&lt;use&gt;<\/code> element<\/li><li><strong>Inherited:<\/strong> no<\/li><li><strong>Animation type:<\/strong> repeatable list<\/li><\/ul>\n\n\n\n<p>That\u2019s basically saying that the syntax accepts a background size (<code>&lt;bg-size&gt;<\/code>) value that can either be one or two lengths and\/or percentages (<code>&lt;length-percentage&gt;<\/code>), set to <code>auto<\/code>, &nbsp;or one of two keywords (<code>cover<\/code> and <code>contain<\/code>).<\/p>\n\n\n\n<ul><li>When <strong>two values<\/strong> are used, the first value specifies the <strong>width<\/strong> of the mask image, and the second value specifies its <strong>height<\/strong>.<\/li><li>When <strong>one value<\/strong> that is not contain or cover is used, it defines the width of the mask image and the height is assumed to be <code>auto<\/code>.<\/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\">\/* Lengths *\/\nmask-size: 200px; \/* width is 200px and height is auto *\/\nmask-size: 50% 100%; \/* width is 50% and height is 100% *\/\n\u2028\n\/* Keywords *\/\nmask-size: contain;\nmask-size: cover;\n\u2028\n\/* Global values *\/\nmask-size: auto;\nmask-size: intial;\nmask-size: inherit;\nmask-size: unset;<\/code><\/pre>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-value-definitions\">Value definitions<\/h4>\n\n\n<ul><li><strong><code>&lt;length&gt;<\/code>:<\/strong> Any valid and non-negative CSS length, such as <code>px<\/code>, <code>em<\/code>, <code>rem<\/code> and <code>%<\/code>, among others.<\/li><li><strong><code>&lt;percentage&gt;<\/code>:<\/strong> Specifies the size of mask layer image as a percentage value relative to the mask positioning area, which is set by the value of <code>mask-origin<\/code>. By default, this value is <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/b\/box-sizing\/\"><code>border-box<\/code><\/a>, meaning that it contains borders, padding and content of the box.<\/li><li><strong><code>auto<\/code>: <\/strong>The intrinsic height and width of the mask image is used and, for images like gradients which don&#8217;t have intrinsic dimensions, it is rendered at the size of the mask positioning area.<\/li><li><strong><code>contain<\/code>:<\/strong> Scales the mask image while preserving its intrinsic proportion in a way that both its width and its height can fit inside the mask positioning area. For the images like gradients that don&#8217;t have intrinsic dimensions, it is rendered at the size of the mask positioning area.<\/li><li><strong><code>cover<\/code>:<\/strong> Scales the mask image while preserving its intrinsic proportion in a way that both its width and its height can entirely cover the mask positioning area. For the images like gradients that don&#8217;t have intrinsic dimensions, it is rendered at the size of the mask positioning area.<\/li><li><strong><code>initial<\/code>:<\/strong> Applies the property\u2019s default setting, which is <code>auto<\/code>.<\/li><li><strong><code>inherit<\/code>: <\/strong>Adopts the mask-size value of the parent.<\/li><li><strong><code>unset<\/code>:<\/strong> Removes the current <code>mask-size<\/code> from the element.<\/li><\/ul>\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 sizes and each value is applied to a corresponding mask layer image specified in the <code>mask-image<\/code> property.<\/p>\n\n\n\n<p>In the following example, the first value specifies the size of the first image, the second value specifies the size of the second image, and so on.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.element {\n\u00a0 mask-image: url(image1.png), url(image2.png), url(image3.png);\n\u00a0 mask-size: 100px 100%, auto, contain;\n}<\/code><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-the-auto-value\">The <code>auto<\/code> value<\/h3>\n\n\n<p>If the value of the <code>mask-size<\/code> property is specified as <code>auto<\/code>, like this:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.element {\n\u00a0 mask-size: auto auto;\n\u00a0 \/* or *\/\n\u00a0 mask-size: auto;\n}<\/code><\/pre>\n\n\n\n<p>\u2026then the mask image scales in the corresponding directions in order to maintain its aspect ratio. That said, &nbsp;we can get various results depending on the image&#8217;s intrinsic dimensions and proportion.<\/p>\n\n\n\n<figure class=\"wp-block-table ticss-a95878a9\"><table><thead><tr><th><strong>Proportion\/Dimension<\/strong><\/th><th>No intrinsic dimensions<\/th><th>One intrinsic dimension<\/th><th>Both intrinsic dimensions<\/th><\/tr><\/thead><tbody><tr><td><strong>Has Proportion<\/strong><\/td><td>Rendered as if contain had been specified instead<\/td><td>Rendered at the size determined by that one dimension and the proportion<\/td><td>Rendered at that size<\/td><\/tr><tr><td><strong>No Proportion<\/strong><\/td><td>Rendered at the size of the mask positioning area<\/td><td>Rendered using the intrinsic dimension and the corresponding dimension of the mask positioning area<\/td><td>N\/A<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>If the value of <code>mask-size<\/code> is specified with <code>auto<\/code> and another non-auto value like the following:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.element {\n\u00a0 mask-size: auto 200px;\n}<\/code><\/pre>\n\n\n\n<p>\u2026then:<\/p>\n\n\n\n<ul><li><strong>if the image has an intrinsic proportion<\/strong>, the auto value gets computed using the the specified dimension and the intrinsic proportion.<\/li><li><strong>if the image has no intrinsic proportion<\/strong>, the auto value becomes the image&#8217;s corresponding intrinsic dimension if it exists and, if it doesn&#8217;t, auto will be the corresponding dimension of the mask positioning area.<\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-understanding-cover-and-contain\">Understanding <code>cover<\/code> and <code>contain<\/code><\/h3>\n\n\n<p>The following video explains how the contain and cover keywords work. Note that the initial position of a mask layer is at the center of the positioning area:<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/css-tricks.com\/wp-content\/uploads\/2020\/09\/contain-cover.mp4\" playsinline><\/video><\/figure>\n\n\n\n<p>If the image has no intrinsic aspect ratio, then specifying either cover or contain renders the mask image at the size of the mask positioning area.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-and-just-what-the-heck-is-an-intrinsic-dimension-and-intrinsic-proportion\">And just what the heck is an intrinsic dimension and intrinsic proportion?<\/h3>\n\n\n<p>Intrinsic dimensions are width and height of an element and intrinsic proportion is ratio of them.<\/p>\n\n\n\n<ul><li><strong>A bitmap imag<\/strong>e like a PNG format, always has intrinsic dimensions and an intrinsic proportion.<\/li><li><strong>A vector image<\/strong> like a SVG format, may have both intrinsic dimensions. Therefore, it also has an intrinsic proportion. It also may have one or no intrinsic dimensions and, in either case, it might or might not have an intrinsic proportion.<\/li><li><strong>Gradients<\/strong> are like images with no intrinsic dimensions or intrinsic proportion.<\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-demo\"><strong>Demo<\/strong><\/h3>\n\n\n<p>The following demo uses a length for the mask-size. Try change the value to other types of values in the code and check the result.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_KKzeRxE\" src=\"\/\/codepen.io\/anon\/embed\/KKzeRxE?height=650&amp;theme-id=1&amp;slug-hash=KKzeRxE&amp;default-tab=result\" height=\"650\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed KKzeRxE\" title=\"CodePen Embed KKzeRxE\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\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\">18+<\/td><td class=\"has-text-align-center\" data-align=\"center\">53+<\/td><td class=\"has-text-align-center\" data-align=\"center\">All<\/td><td class=\"has-text-align-center\" data-align=\"center\">4+<\/td><td class=\"has-text-align-center\" data-align=\"center\">70<\/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 Mini<\/th><\/tr><\/thead><tbody><tr><td class=\"has-text-align-center\" data-align=\"center\">85+<\/td><td class=\"has-text-align-center\" data-align=\"center\">79+<\/td><td class=\"has-text-align-center\" data-align=\"center\">4.4+<\/td><td class=\"has-text-align-center\" data-align=\"center\">All<\/td><td class=\"has-text-align-center\" data-align=\"center\">All<\/td><\/tr><\/tbody><\/table><figcaption>Source: <a href=\"https:\/\/caniuse.com\/mdn-css_properties_mask-size\" rel=\"noopener\">caniuse<\/a><\/figcaption><\/figure>\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-321696\">\n\n  <time datetime=\"2014-12-02\" title=\"Originally published Sep 23, 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  \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-321696\">\n\n  <time datetime=\"2017-06-07\" title=\"Originally published Sep 23, 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  \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-321696\">\n\n  <time datetime=\"2014-12-03\" title=\"Originally published Sep 23, 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  \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-321696\">\n\n  <time datetime=\"2020-05-13\" title=\"Originally published Sep 23, 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  \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-321696\">\n\n  <time datetime=\"2019-03-02\" title=\"Originally published Sep 23, 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  \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-321696\">\n\n  <time datetime=\"2021-03-23\" title=\"Originally published Sep 23, 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  \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-321696\">\n\n  <time datetime=\"2020-12-18\" title=\"Originally published Sep 23, 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  \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-321696\">\n\n  <time datetime=\"2020-03-29\" title=\"Originally published Sep 23, 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-image\/\">\n      mask-image    <\/a>\n  <\/h3>\n\n      <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/m\/mask-image\/\" class=\"almanac-example\">\n      <code class=\"language-css\">.element { mask-image: url(star.svg); }<\/code>\n    <\/a>\n  \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-321696\">\n\n  <time datetime=\"2021-02-03\" title=\"Originally published Sep 23, 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  \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-321696\">\n\n  <time datetime=\"2020-10-29\" title=\"Originally published Sep 23, 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  \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-321696\">\n\n  <time datetime=\"2020-10-12\" title=\"Originally published Sep 23, 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-position\/\">\n      mask-position    <\/a>\n  <\/h3>\n\n      <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/m\/mask-position\/\" class=\"almanac-example\">\n      <code class=\"language-css\">.element { mask-position: 20px center; }<\/code>\n    <\/a>\n  \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-321696\">\n\n  <time datetime=\"2020-04-24\" title=\"Originally published Sep 23, 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  \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-321696\">\n\n  <time datetime=\"2021-03-02\" title=\"Originally published Sep 23, 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  \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>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. Masking allows you to display selected parts of an element while hiding the rest. The size of the mask is defined by the mask-size property.<\/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":{"_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":[],"acf":[],"jetpack-related-posts":[{"id":343405,"url":"https:\/\/css-tricks.com\/almanac\/properties\/m\/mask\/","url_meta":{"origin":321696,"position":0},"title":"mask","date":"July 2, 2021","format":false,"excerpt":"The mask property is a shorthand to specify all mask-* properties. mask can hide part of the element is applied to and It accepts one or more comma-separated values, where each value corresponds to a mask layer. .element { mask: url(mask.png) right bottom \/ 100px repeat-y; } mask is included\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/11\/drama-masks.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":323048,"url":"https:\/\/css-tricks.com\/almanac\/properties\/m\/mask-position\/","url_meta":{"origin":321696,"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":340283,"url":"https:\/\/css-tricks.com\/almanac\/properties\/m\/mask-composite\/","url_meta":{"origin":321696,"position":2},"title":"mask-composite","date":"May 10, 2021","format":false,"excerpt":"The mask-composite CSS property allows us to combine a mask layer image with the mask layers below it. .element { mask-composite: subtract; } When there are multiple mask layer images, they need to be composited into one final mask layer.\u00a0mask-compositespecifies\u00a0how mask layers\u00a0with different shapes are combined into a single image.\u00a0Think\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":355486,"url":"https:\/\/css-tricks.com\/almanac\/properties\/m\/mask-border\/","url_meta":{"origin":321696,"position":3},"title":"mask-border","date":"November 3, 2021","format":false,"excerpt":"The mask-border CSS property sets a border image to an element\u2019s masked border area. It is s shorthand for setting the mask-border-source, mask-border-slice, mask-border-width, mask-border-outset, mask-border-repeat, and mask-border-mode properties in a single declaration.","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/10\/s_A4675D262DA10437B039C41DDD674601F72A8FFCAB2801EE4264E0D51AB8C554_1634664377390_slice.png?fit=1000%2C1000&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":324740,"url":"https:\/\/css-tricks.com\/almanac\/properties\/m\/mask-origin\/","url_meta":{"origin":321696,"position":4},"title":"mask-origin","date":"October 29, 2020","format":false,"excerpt":"The mask-origin specifies the mask position area of a mask layer image. In other words, it defines where the origin of the mask layer image is, whether it's the edge of the border, padding or content box. .element { \u00a0 mask-image: url(star.svg); \u00a0 mask-origin: content-box; } For elements rendered as\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":305793,"url":"https:\/\/css-tricks.com\/almanac\/properties\/m\/mask-image\/","url_meta":{"origin":321696,"position":5},"title":"mask-image","date":"March 29, 2020","format":false,"excerpt":"The mask 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\u2026","rel":"","context":"In \"mask\"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/image-and-mask.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/321696"}],"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=321696"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/321696\/revisions"}],"predecessor-version":[{"id":366438,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/321696\/revisions\/366438"}],"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=321696"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=321696"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}