{"id":323048,"date":"2020-10-12T12:19:22","date_gmt":"2020-10-12T19:19:22","guid":{"rendered":"https:\/\/css-tricks.com\/?page_id=323048"},"modified":"2021-05-10T10:59:42","modified_gmt":"2021-05-10T17:59:42","slug":"mask-position","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/m\/mask-position\/","title":{"rendered":"mask-position"},"content":{"rendered":"\n<p>In CSS, the <code>mask-position<\/code> property specifies the initial position of a <a href=https://css-tricks.com/"https:////css-tricks.com//almanac//properties//m//mask-image///">mask layer image<\/a> relative to the mask position area. It works like the <code><a href=https://css-tricks.com/"https:////css-tricks.com//almanac//properties//b//background-position///">background-position<\/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-position: 20px center;\n}<\/code><\/pre>\n\n\n\n<!--more-->\n\n\n\n<p>Masking allows you to display selected parts of an element while hiding the rest. In the following demo, you can change the position 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_gOMYgZV\" src=https://css-tricks.com/"////codepen.io//anon//embed//gOMYgZV?height=1000&amp;theme-id=1&amp;slug-hash=gOMYgZV&amp;default-tab=result\%22 height=\"1000\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed gOMYgZV\" title=\"CodePen Embed gOMYgZV\" 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-position: &lt;position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | &lt;length-percentage> ] [ top | center | bottom | &lt;length-percentage> ]? | [ [ left | right ] &lt;length-percentage> ] &amp;&amp; [ [ top | bottom ] &lt;length-percentage> ] ]<\/code><\/pre>\n\n\n\n<ul class=\"ticss-0b452227\"><li><strong>Initial value:<\/strong> <code>0% 0%<\/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 graphic elements and the <code>&lt;use&gt;<\/code> element.<\/li><li><strong>Inherited:<\/strong> no<\/li><li><strong>Computed value:<\/strong> consisting of: two keywords representing the origin and two offsets from that origin, each given as an absolute length (if given a <code>&lt;length&gt;<\/code>), otherwise as a percentage.<\/li><li><strong>Animation type:<\/strong> repeatable list<\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-values\">Values<\/h3>\n\n\n<p>A &nbsp;<code>&lt;position&gt;<\/code> can be specified in terms of offset keywords (<code>top<\/code>, <code>left<\/code>, <code>bottom<\/code>, <code>right<\/code>, and <code>center<\/code>), percentages, and length values regarding the edges of the element, similar to the CSS <code>background-position<\/code> property.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">\/* Offset keywords *\/\nmask-position: top;\nmask-position: right;\nmask-position: bottom;\nmask-position: left;\nmask-position: center;\n\u2028\n\/* Length values *\/\nmask-position: 100px 200px;\nmask-position: 5rem 20%;\nmask-position: 0 10vh;\n\u2028\n\/* Percentage values *\/\nmask-position: 25% 50%;\n\u2028\n\/* Global values *\/\nmask-position: intial;\nmask-position: inherit;\nmask-position: 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 CSS length (such as <code>px<\/code>, <code>em<\/code>, <code>rem<\/code> and <code>%<\/code>, among others) which will specify how far the edge of the mask image is from the corresponding edge of the element.<\/li><li><strong><code>&lt;percentage&gt;<\/code>:<\/strong> Specifies the position of mask layer image as a percentage value relative to the mask positioning area minus size of the mask image.<\/li><li><strong><code>top<\/code>:<\/strong> Equivalent to 0% for the vertical position.<\/li><li><strong><code>right<\/code>:<\/strong> Equivalent to 100% for the horizontal position.<\/li><li><strong><code>bottom<\/code>:<\/strong> Equivalent to 100% for the vertical position.<\/li><li><strong><code>left<\/code>:<\/strong> Equivalent to 0% for the horizontal position.<\/li><li><strong><code>center<\/code>:<\/strong> Equivalent to 50% for the horizontal position if the horizontal position is not otherwise specified, or 50% for the vertical position, if it is.<\/li><li><strong><code>initial<\/code>:<\/strong> Applies the property\u2019s default setting, which is 0% 0%.<\/li><li><strong><code>inherit<\/code>:<\/strong> Adopts the <code>mask-position<\/code> value of the parent.<\/li><li><strong><code>unset<\/code>:<\/strong> Removes the current <code>mask-position<\/code> from the element.<\/li><\/ul>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-using-multiple-values\">Using multiple values<\/h4>\n\n\n<p>This property can take a comma-separated list of values for mask positions and each value is applied to a corresponding mask layer image specified in the <code>mask-image<\/code> property. In the following example, the first value specifies the position of the first image, the second value specifies the position 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(\"image-1.png\"), url(\"image-2.png\"), url(\"image-3.png\");\n\u00a0 mask-position: 100px 10%, 0 right, center;\n}<\/code><\/pre>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-different-syntax\">Different syntax<\/h4>\n\n\n<p><code>mask-position<\/code> can take one, two, three or four values to specify the position of the mask layer horizontally and vertically.<\/p>\n\n\n<h5 class=\"wp-block-heading\" id=\"h-single-value\">Single value<\/h5>\n\n\n<p>In case a <strong>single value<\/strong> is set, that is taken as the horizontal value and the vertical value is assumed to be <code>center<\/code>.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">mask-position: 100px; \/* 100px center *\/<\/code><\/pre>\n\n\n<h5 class=\"wp-block-heading\" id=\"h-two-values\">Two values<\/h5>\n\n\n<p>In case of using pair values, the first one is taken as the horizontal value, and the second one specifies the position of the make layer vertically.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">mask-position: 10% 50%; \/* x=10%, Y=50% *\/<\/code><\/pre>\n\n\n\n<p>If both values are keywords, then the order of the keywords is irrelevant:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">mask-position: top left; \/* = left top *\/<\/code><\/pre>\n\n\n\n<p>But when we have a combination of keyword and length or percentage, <strong>the order matters<\/strong> and the first value always corresponds to the horizontal offset. Therefore:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">mask-position: 50% right; \/* = horizontal center, vertical right *\/\nmask-position: right 50%; \/* = horizontal right, vertical center *\/<\/code><\/pre>\n\n\n<h5 class=\"wp-block-heading\" id=\"h-three-values\">Three values<\/h5>\n\n\n<p>If three values are given, the missing offset is assumed to be zero:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">mask-position: left 100px bottom; \/* left=100px bottom=0 *\/<\/code><\/pre>\n\n\n<h5 class=\"wp-block-heading\" id=\"h-four-values\">Four values<\/h5>\n\n\n<p>A four-value syntax allows you to specify which sides of the element you are positioning the mask relative to (values 1 and 3), and then the distance away from those sides (values 2 and 4).<\/p>\n\n\n\n<p>So, if you want to position the mask 100px from the bottom of the element, and 200px from the right, you can do like the following:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">mask-position: bottom 100px right 200px;<\/code><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-animating-masks\">Animating masks<\/h3>\n\n\n<p>It&#8217;s possible to animate mask-position and <code><a href=https://css-tricks.com/"https:////css-tricks.com//almanac//properties//m//mask-size/">mask-size<\/a><\/code> using keyframe animation and CSS transitioning, 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-image: url(\"mask.png\");\n\u00a0 mask-position: 10px 10px;\n\u00a0 transition: mask-position 1s ease-in-out;\n}\n\u2028\n.element:hover {\n\u00a0 mask-position: right 10px bottom 10px;\n}<\/code><\/pre>\n\n\n\n<p>In this next demo, we are animating position of the mask layer using keyframe animation:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_wvWwgxv\" src=https://css-tricks.com/"////codepen.io//anon//embed//wvWwgxv?height=600&amp;theme-id=1&amp;slug-hash=wvWwgxv&amp;default-tab=result\%22 height=\"600\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed wvWwgxv\" title=\"CodePen Embed wvWwgxv\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-demo\">Demo<\/h3>\n\n\n<p>Change the value for <code>mask-position<\/code> in the following demo:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_BazBpGa\" src=https://css-tricks.com/"////codepen.io//anon//embed//BazBpGa?height=650&amp;theme-id=1&amp;slug-hash=BazBpGa&amp;default-tab=result\%22 height=\"650\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed BazBpGa\" title=\"CodePen Embed BazBpGa\" 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\">4+<\/td><td class=\"has-text-align-center\" data-align=\"center\">3.2+<\/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\">85+<\/td><td class=\"has-text-align-center\" data-align=\"center\">79+<\/td><td class=\"has-text-align-center\" data-align=\"center\">2.1+<\/td><td class=\"has-text-align-center\" data-align=\"center\">3.2+<\/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-position/" 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 articles\" id=\"mini-post-323048\">\n\n  <time datetime=\"2014-12-02\" title=\"Originally published Oct 12, 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-323048\">\n\n  <time datetime=\"2017-06-07\" title=\"Originally published Oct 12, 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-323048\">\n\n  <time datetime=\"2014-12-03\" title=\"Originally published Oct 12, 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/"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-323048\">\n\n  <time datetime=\"2020-05-13\" title=\"Originally published Oct 12, 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<article class=\"in-article-card articles\" id=\"mini-post-323048\">\n\n  <time datetime=\"2019-03-02\" title=\"Originally published Oct 12, 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/"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-323048\">\n\n  <time datetime=\"2021-03-23\" title=\"Originally published Oct 12, 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/"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\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-323048\">\n\n  <time datetime=\"2020-12-18\" title=\"Originally published Oct 12, 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-323048\">\n\n  <time datetime=\"2020-03-29\" title=\"Originally published Oct 12, 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-323048\">\n\n  <time datetime=\"2021-02-03\" title=\"Originally published Oct 12, 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-323048\">\n\n  <time datetime=\"2020-10-29\" title=\"Originally published Oct 12, 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-origin///">\n      mask-origin    <\/a>\n  <\/h3>\n\n      <a href=https://css-tricks.com/"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/"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-323048\">\n\n  <time datetime=\"2020-04-24\" title=\"Originally published Oct 12, 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-323048\">\n\n  <time datetime=\"2020-09-23\" title=\"Originally published Oct 12, 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-323048\">\n\n  <time datetime=\"2021-03-02\" title=\"Originally published Oct 12, 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","protected":false},"excerpt":{"rendered":"<p>In CSS, the mask-position property specifies the initial position of a mask layer image relative to the mask position area. [&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\/323048"}],"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=323048"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/323048\/revisions"}],"predecessor-version":[{"id":340329,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/323048\/revisions\/340329"}],"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=323048"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=323048"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}