{"id":324740,"date":"2020-10-29T16:26:31","date_gmt":"2020-10-29T23:26:31","guid":{"rendered":"https:\/\/css-tricks.com\/?page_id=324740"},"modified":"2021-05-10T10:58:59","modified_gmt":"2021-05-10T17:58:59","slug":"mask-origin","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/m\/mask-origin\/","title":{"rendered":"mask-origin"},"content":{"rendered":"\n<p>The <code>mask-origin<\/code> specifies the mask position area of a <a href=https://css-tricks.com/"https:////css-tricks.com//almanac//properties//m//mask-image///">mask layer image<\/a>. In other words, it defines where the origin of the mask layer image is, whether it&#8217;s the <a href=https://css-tricks.com/"https:////css-tricks.com//the-css-box-model///">edge of the border, padding or content box<\/a>.<\/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-origin: content-box;\n}<\/code><\/pre>\n\n\n\n<!--more-->\n\n\n\n<p>For elements rendered as a single box, <code>mask-origin<\/code> specifies the mask positioning area. For elements rendered as multiple boxes (e.g., inline boxes on several lines, boxes on several pages) the property specifies which boxes <code>box-decoration-break<\/code> operates on to determine the mask positioning area.<\/p>\n\n\n\n<p>This property works like the <code><a href=https://css-tricks.com/"https:////css-tricks.com//almanac//properties//b//background-origin///">background-origin<\/a><\/code> property, except it has different initial value and three additional values that apply to SVG elements.<\/p>\n\n\n\n<p>In the following demo you can change the origin of the mask layer image. There is the same image underneath to show the effect of masking better and marking the border and padding areas:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_PozWxJy\" src=https://css-tricks.com/"////codepen.io//anon//embed//PozWxJy?height=450&amp;theme-id=1&amp;slug-hash=PozWxJy&amp;default-tab=result\%22 height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed PozWxJy\" title=\"CodePen Embed PozWxJy\" 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-origin: &lt;geometry-box> = content-box | padding-box | border-box | margin-box | fill-box | stroke-box | view-box<\/code><\/pre>\n\n\n\n<ul><li><strong>Initial value:<\/strong> <code>border-box<\/code><\/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> 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\">\/* Keywords *\/\nmask-origin: content-box;\nmask-origin: padding-box;\nmask-origin: border-box;\nmask-origin: margin-box;\nmask-origin: fill-box;\nmask-origin: stroke-box;\nmask-origin: view-box;\n\u2028\n\/* Global values *\/\nmask-origin: intial;\nmask-origin: inherit;\nmask-origin: unset;<\/code><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-value-definitions\">Value definitions<\/h3>\n\n\n<ul><li><strong><code>content-box<\/code>:<\/strong> The position is relative to the content box. The origin of the <code>mask-image<\/code> is positioned at the top-left corner of the content edge.<\/li><li><strong><code>padding-box<\/code><\/strong>: The position is relative to the padding box. The origin of the mask image at <code>0 0<\/code> is positioned at the top-left corner of the padding edge, <code>100% 100%<\/code> is the bottom-right corner.<\/li><li><strong><code>border-box<\/code><\/strong>: The default value, which sets the position relative to the border box.<\/li><li><strong><code>margin-box<\/code><\/strong>: The position is relative to the margin box<\/li><li><strong><code>fill-box<\/code><\/strong>: The position is relative to the object bounding box<\/li><li><strong><code>stroke-box<\/code><\/strong>: The position is relative to the stroke bounding box<\/li><li><strong><code>view-box<\/code><\/strong>: Uses the nearest SVG viewport as reference box. If a <code>viewBox<\/code> attribute is specified for the SVG viewport creating element then the reference box is positioned at the origin of the coordinate system established by the <code>viewBox<\/code> attribute and the dimension of the reference box is set to the <code>width<\/code> and <code>height<\/code> values of the <code>viewBox<\/code> attribute.<\/li><li><strong><code>initial<\/code>:<\/strong> Applies the property\u2019s default setting, which is <code>border-box<\/code><\/li><li><strong><code>inherit<\/code>:<\/strong> Adopts the <code>mask-origin<\/code> value of the parent.<\/li><li><strong><code>unset<\/code>:<\/strong> Removes the current <code>mask-origin<\/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 origins, where each value is applied to a corresponding mask layer image specified in the <code><a href=https://css-tricks.com/"https:////css-tricks.com//almanac//properties//m//mask-image///">mask-image<\/a><\/code> property. In the following example, the first value specifies the origin of the first image, the second value specifies the origin 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=\"3\"><code markup=\"tt\">.element {\n\u00a0 mask-image: url(image1.png), url(image2.png), url(image3.png);\n\u00a0 mask-origin: padding-box, border-box, content-box;\n}<\/code><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-notes\">Notes<\/h3>\n\n\n<ul><li>For SVG elements without associated CSS layout box, the values <code>content-box<\/code>, <code>padding-box<\/code> and <code>border-box<\/code> compute to <code>fill-box<\/code>.<\/li><li>For elements with associated CSS layout box, the values <code>fill-box<\/code>, <code>stroke-box<\/code> and <code>view-box<\/code> compute to the <code>initial<\/code> value of <code>mask-origin<\/code>, which is <code>border-box<\/code>.<\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-demo\">Demo<\/h3>\n\n\n<p>When we have the mask layer image repeated, the first instance is positioned at top-left corner of the specified positioning area, and then it is repeated starting from there according to the value of the <code><a href=https://css-tricks.com/"https:////css-tricks.com//almanac//properties//m//mask-repeat///">mask-repeat<\/a><\/code> property.<\/p>\n\n\n\n<p>Change the value for <code>mask-origin<\/code> in the following demo to get a better idea of what is happening:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_wvWgQPN\" src=https://css-tricks.com/"////codepen.io//anon//embed//wvWgQPN?height=450&amp;theme-id=1&amp;slug-hash=wvWgQPN&amp;default-tab=result\%22 height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed wvWgQPN\" title=\"CodePen Embed wvWgQPN\" 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\">79+<\/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\">15+<\/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\">All<\/td><td class=\"has-text-align-center\" data-align=\"center\">All<\/td><td class=\"has-text-align-center\" data-align=\"center\">All<\/td><td class=\"has-text-align-center\" data-align=\"center\">All<\/td><td class=\"has-text-align-center\" data-align=\"center\">59+<\/td><\/tr><\/tbody><\/table><figcaption>Source: <a href=https://css-tricks.com/"https:////caniuse.com//mdn-css_properties_mask-origin/" rel=\"noopener\">caniuse<\/a><\/figcaption><\/figure>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-related-information\">Related information<\/h3>\n\n\n    \t\t\n    <div class=\"in-article-cards\">\n      <article class=\"in-article-card articles\" id=\"mini-post-324740\">\n\n  <time datetime=\"2014-12-02\" title=\"Originally published Oct 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/"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-324740\">\n\n  <time datetime=\"2017-06-07\" title=\"Originally published Oct 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/"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-324740\">\n\n  <time datetime=\"2020-05-13\" title=\"Originally published Oct 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/"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    <\/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-324740\">\n\n  <time datetime=\"2020-12-18\" title=\"Originally published Oct 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/"https:////css-tricks.com//almanac//properties//m//mask-clip///">\n      mask-clip    <\/a>\n  <\/h3>\n\n      <a href=https://css-tricks.com/"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/"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&amp;d=retro&amp;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/"https:////css-tricks.com//author//seyedi///">\n      Mojtaba Seyedi    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card \" id=\"mini-post-324740\">\n\n  <time datetime=\"2020-03-29\" title=\"Originally published Oct 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/"https:////css-tricks.com//almanac//properties//m//mask-image///">\n      mask-image    <\/a>\n  <\/h3>\n\n      <a href=https://css-tricks.com/"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/"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-324740\">\n\n  <time datetime=\"2021-02-03\" title=\"Originally published Oct 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/"https:////css-tricks.com//almanac//properties//m//mask-mode///">\n      mask-mode    <\/a>\n  <\/h3>\n\n      <a href=https://css-tricks.com/"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/"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&amp;d=retro&amp;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/"https:////css-tricks.com//author//seyedi///">\n      Mojtaba Seyedi    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card \" id=\"mini-post-324740\">\n\n  <time datetime=\"2020-10-12\" title=\"Originally published Oct 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/"https:////css-tricks.com//almanac//properties//m//mask-position///">\n      mask-position    <\/a>\n  <\/h3>\n\n      <a href=https://css-tricks.com/"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/"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&amp;d=retro&amp;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/"https:////css-tricks.com//author//seyedi///">\n      Mojtaba Seyedi    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card \" id=\"mini-post-324740\">\n\n  <time datetime=\"2020-04-24\" title=\"Originally published Oct 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/"https:////css-tricks.com//almanac//properties//m//mask-repeat///">\n      mask-repeat    <\/a>\n  <\/h3>\n\n      <a href=https://css-tricks.com/"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/"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-324740\">\n\n  <time datetime=\"2020-09-23\" title=\"Originally published Oct 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/"https:////css-tricks.com//almanac//properties//m//mask-size///">\n      mask-size    <\/a>\n  <\/h3>\n\n      <a href=https://css-tricks.com/"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  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"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&amp;d=retro&amp;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/"https:////css-tricks.com//author//seyedi///">\n      Mojtaba Seyedi    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card \" id=\"mini-post-324740\">\n\n  <time datetime=\"2021-03-02\" title=\"Originally published Oct 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/"https:////css-tricks.com//almanac//properties//m//mask-type///">\n      mask-type    <\/a>\n  <\/h3>\n\n      <a href=https://css-tricks.com/"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/"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&amp;d=retro&amp;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/"https:////css-tricks.com//author//seyedi///">\n      Mojtaba Seyedi    <\/a>\n  <\/div>\n\n<\/article>\n    <\/div>\n  \n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The mask-origin specifies the mask position area of a mask layer image. In other words, it defines where the origin [&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\/324740"}],"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=324740"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/324740\/revisions"}],"predecessor-version":[{"id":340328,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/324740\/revisions\/340328"}],"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=324740"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=324740"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}