{"componentChunkName":"component---src-templates-post-jsx","path":"/blog/my-take-on-fading-content-using-transparent-gradients-in-css/","result":{"data":{"mdx":{"body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nconst _frontmatter = {\n  \"title\": \"My take on fading content using transparent gradients in CSS\",\n  \"cover\": \"/blogs/fading-content/cover.svg\",\n  \"date\": \"2024-01-19\",\n  \"type\": [\"tutorial\"]\n};\nconst layoutProps = {\n  _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  let {\n    components\n  } = _ref,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, `Two days ago Amit Merchant wrote a blog post on `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://www.amitmerchant.com/fading-content-using-transparent-gradients-in-css/\"\n  }), `a technique to fade text out`), ` using an overlaid element based on the design of `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://trunk.io\"\n  }), `Trunk.io`), `. He walks through how he came to this solution so go check out the article to see how it's built. Here's the end result:`), mdx(\"div\", {\n    style: {\n      \"position\": \"relative\",\n      \"fontFamily\": \"system-ui\",\n      \"fontWeight\": \"bold\",\n      \"maxWidth\": \"30rem\",\n      \"color\": \"white\",\n      \"background\": \"black\",\n      \"padding\": \"20px\",\n      \"borderRadius\": \"20px\",\n      \"margin\": \"2rem auto 0\"\n    }\n  }, mdx(\"span\", null, \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non pharetra lorem, ac feugiat nunc. Maecenas ac aliquet turpis. Pellentesque interdum turpis tortor, ac rhoncus nisi egestas et. Sed in ante diam. Proin ac vehicula velit. Ut fringilla mauris quis lobortis efficitur.\", ' '), mdx(\"span\", {\n    style: {\n      \"display\": \"block\",\n      \"position\": \"absolute\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"width\": \"100%\",\n      \"height\": \"80%\",\n      \"borderRadius\": \"20px\",\n      \"background\": \"linear-gradient(180deg, transparent 0, black 100%)\"\n    }\n  })), mdx(\"p\", null, `The effect looks great but it has two downsides:`), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, `The text behind the gradient is no longer selectable`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `The effect only works on solid background colors.`)), mdx(\"p\", null, `Both of these are also present in the Trunk.io design that Amit based this on. The first issue is easy to fix: you add this to your overlaid element:`), mdx(\"div\", {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"css\"\n  }, mdx(\"pre\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"language-css\"\n  }), mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-css\"\n  }), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token property\"\n  }), `user-select`), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), `:`), ` none`, mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), `;`)))), mdx(\"p\", null, `That will prevent the overlaid element from capturing mouse events, so you can select words behind the gradient as well.`), mdx(\"p\", null, `The second downside requires a different approach if we want the same effect to work with a non-solid background like an image or gradient. To make it work there, we need to `, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `actually make the text fade`), `, rather than make it look like it fades.`), mdx(\"p\", null, `Modern CSS gives us not one, but two different approaches to achieve this. They have a slightly different result, so we'll go over each one and discuss their differences.`), mdx(\"p\", null, `For both approaches, we're going to use the same HTML structure:`), mdx(\"div\", {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"html\"\n  }, mdx(\"pre\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"language-html\"\n  }), mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-html\"\n  }), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token tag\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token tag\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), `<`), `p`), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), `>`)), `\n  `, mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token tag\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token tag\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), `<`), `span`), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), `>`)), ` Lorem ipsum dolor sit amet consectetur [...] `, mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token tag\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token tag\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), `</`), `span`), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), `>`)), `\n`, mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token tag\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token tag\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), `</`), `p`), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), `>`))))), mdx(\"p\", null, `For this to work, we need an additional wrapper element around the text. In this case we're using a `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `p`), ` and `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `span`), `, but if you already have a different container element around your `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `p`), ` you could use that instead.`), mdx(\"p\", null, `To make the effect easy to see, we'll give our `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `p`), ` some default styling and add a gaudy background gradient:`), mdx(\"div\", {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"css\"\n  }, mdx(\"pre\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"language-css\"\n  }), mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-css\"\n  }), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token selector\"\n  }), `p`), ` `, mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), `{`), `\n  `, mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token property\"\n  }), `background`), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), `:`), ` `, mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token function\"\n  }), `linear-gradient`), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), `(`), `to right`, mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), `,`), ` blue`, mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), `,`), ` red`, mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), `)`), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), `;`), `\n\n  `, mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token property\"\n  }), `max-width`), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), `:`), `30rem`, mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), `;`), `\n  `, mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token property\"\n  }), `padding`), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), `:`), ` 20px`, mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), `;`), `\n  `, mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token property\"\n  }), `border-radius`), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), `:`), ` 20px`, mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), `;`), `\n\n  `, mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token property\"\n  }), `font-family`), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), `:`), ` system-ui`, mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), `;`), `\n  `, mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token property\"\n  }), `font-weight`), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), `:`), ` bold`, mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), `;`), `\n  `, mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token property\"\n  }), `color`), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), `:`), ` white`, mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), `;`), `\n`, mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), `}`)))), mdx(\"p\", null, `The end result looks like this:`), mdx(\"p\", {\n    style: {\n      \"position\": \"relative\",\n      \"background\": \"linear-gradient(to right, blue, red)\",\n      \"fontFamily\": \"system-ui\",\n      \"fontWeight\": \"bold\",\n      \"maxWidth\": \"30rem\",\n      \"color\": \"white\",\n      \"padding\": \"20px\",\n      \"borderRadius\": \"20px\",\n      \"margin\": \"2rem auto 0\"\n    }\n  }, mdx(\"span\", null, \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non pharetra lorem, ac feugiat nunc. Maecenas ac aliquet turpis. Pellentesque interdum turpis tortor, ac rhoncus nisi egestas et. Sed in ante diam. Proin ac vehicula velit. Ut fringilla mauris quis lobortis efficitur.\")), mdx(\"p\", null, `With that as our backdrop, let's look at the two different ways to achieve faded content: `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `background-clip`), ` and `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `mask-image`), `.`), mdx(\"h2\", {\n    \"id\": \"technique-one-background-clip\"\n  }, `Technique one: background-clip`), mdx(\"p\", null, `The `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `background-clip`), ` CSS property lets you define where your background should be restricted to: the entire element (`, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `border-box`), `, which is the default), inside the border with `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `padding-box`), ` or sit only behind the content with `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `content-box`), `.`), mdx(\"p\", null, `But background-clip has a fourth value of `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `text`), `. Setting this will restrict the background to be visible only behind the text.`), mdx(\"p\", null, `Just doing that doesn't `, mdx(\"em\", {\n    parentName: \"p\"\n  }, `actually`), ` change the way it looks, because the text also has a color that overlays the background. When using `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `background-clip: text`), ` you want to combine it with `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `color: transparent`), `.`), mdx(\"p\", null, `Lastly to make that text fade, we're going to set the background to a linear gradient that fades from our text color (white) to transparent.`), mdx(\"p\", null, `Combined, this is what that looks like:`), mdx(\"div\", {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"css\"\n  }, mdx(\"pre\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"language-css\"\n  }), mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-css\"\n  }), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token selector\"\n  }), `span`), ` `, mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), `{`), `\n  `, mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token property\"\n  }), `display`), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), `:`), ` block`, mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), `;`), `\n  `, mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token property\"\n  }), `background`), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), `:`), ` `, mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token function\"\n  }), `linear-gradient`), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), `(`), `to bottom`, mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), `,`), ` white`, mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), `,`), ` transparent`, mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), `)`), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), `;`), `\n  `, mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token property\"\n  }), `color`), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), `:`), ` transparent`, mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), `;`), `\n  `, mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token property\"\n  }), `background-clip`), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), `:`), ` text`, mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), `;`), `\n`, mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), `}`)))), mdx(\"p\", null, `And here is the result:`), mdx(\"p\", {\n    style: {\n      \"position\": \"relative\",\n      \"background\": \"linear-gradient(to right, blue, red)\",\n      \"fontFamily\": \"system-ui\",\n      \"fontWeight\": \"bold\",\n      \"maxWidth\": \"30rem\",\n      \"color\": \"white\",\n      \"padding\": \"20px\",\n      \"borderRadius\": \"20px\",\n      \"margin\": \"2rem auto 0\"\n    }\n  }, mdx(\"span\", {\n    style: {\n      \"display\": \"block\",\n      \"background\": \"linear-gradient(to bottom, white, transparent)\",\n      \"color\": \"transparent\",\n      \"backgroundClip\": \"text\"\n    }\n  }, \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non pharetra lorem, ac feugiat nunc. Maecenas ac aliquet turpis. Pellentesque interdum turpis tortor, ac rhoncus nisi egestas et. Sed in ante diam. Proin ac vehicula velit. Ut fringilla mauris quis lobortis efficitur.\")), mdx(\"p\", null, `Notice how the text fades into the background evenly across the gradient, and how each word remains selectable because we're not overlaying anything on top of the text.`), mdx(\"h3\", {\n    \"id\": \"browser-support\"\n  }, `Browser support`), mdx(\"p\", null, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `background-clip: text`), ` is supported in all evergreen browsers and has been for quite a while (support in all evergreen browsers since 2016 when it landed in Firefox) so it's save to use.`), mdx(\"p\", null, `Until fairly recently, Safari (2020) and Chromium (December 2023) required you to use `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `-webkit-background-clip`), ` so for backwards compatibility you will probably also include the prefixed version:`), mdx(\"div\", {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"css\"\n  }, mdx(\"pre\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"language-css\"\n  }), mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-css\"\n  }), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token selector\"\n  }), `span`), ` `, mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), `{`), `\n  `, mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token property\"\n  }), `display`), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), `:`), ` block`, mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), `;`), `\n  `, mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token property\"\n  }), `background`), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), `:`), ` `, mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token function\"\n  }), `linear-gradient`), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), `(`), `to bottom`, mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), `,`), ` white`, mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), `,`), ` transparent`, mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), `)`), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), `;`), `\n  `, mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token property\"\n  }), `color`), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), `:`), ` transparent`, mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), `;`), `\n  `, mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token property\"\n  }), `-webkit-background-clip`), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), `:`), ` text`, mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), `;`), `\n  `, mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token property\"\n  }), `background-clip`), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), `:`), ` text`, mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), `;`), `\n`, mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), `}`)))), mdx(\"p\", null, `Make sure to put the prefixed version `, mdx(\"em\", {\n    parentName: \"p\"\n  }, `before`), ` the standard declaration. In CSS the last declaration wins, so the standard will overwrite the prefixed version and be used instead`), mdx(\"h3\", {\n    \"id\": \"downsides\"\n  }, `Downsides`), mdx(\"p\", null, `This technique works well, but it has a downside. Because the text is now transparent, it takes on the color of the background. If your content had different colors for elements like links or other elements like emoji, those colors are either replaced or they don't fade:`), mdx(\"p\", {\n    style: {\n      \"position\": \"relative\",\n      \"background\": \"linear-gradient(to right, blue, red)\",\n      \"fontFamily\": \"system-ui\",\n      \"fontWeight\": \"bold\",\n      \"maxWidth\": \"30rem\",\n      \"color\": \"white\",\n      \"padding\": \"20px\",\n      \"borderRadius\": \"20px\",\n      \"margin\": \"2rem auto 0\"\n    }\n  }, mdx(\"span\", {\n    style: {\n      \"display\": \"block\",\n      \"background\": \"linear-gradient(to bottom, white, transparent)\",\n      \"color\": \"transparent\",\n      \"backgroundClip\": \"text\"\n    }\n  }, \"Emojis: \\uD83D\\uDE2C\\uD83E\\uDEE3\\uD83D\\uDE31\\uD83D\\uDE80\\u2728Lorem ipsum dolor sit amet, consectetur adipiscing elit.\", mdx(\"br\", null), \"Lorem \", mdx(\"a\", {\n    href: \"#\",\n    style: {\n      \"color\": \"hotpink\"\n    }\n  }, \"My hotpink link\"), \" ipsum dolor sit amet, consectetur\")), mdx(\"p\", null, `If you want to keep those as well as fade the content out, we need a different technique.`), mdx(\"h2\", {\n    \"id\": \"technique-two-mask-image\"\n  }, `Technique two: mask-image`), mdx(\"p\", null, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `mask-image`), ` lets you use an image (or SVG or gradient) as a mask layer, similar to how that works in graphics editors.`), mdx(\"p\", null, `Usually the alpha channel of the mask image is used to determine which parts of your element are visible and which ones aren't, but you can set `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `mask-mode`), ` to `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `luminance`), ` and use a black-white mask instead. For our purpose though, the alpha channel is fine.`), mdx(\"p\", null, `Here's what the CSS looks like for that:`), mdx(\"div\", {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"css\"\n  }, mdx(\"pre\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"language-css\"\n  }), mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-css\"\n  }), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token selector\"\n  }), `span`), ` `, mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), `{`), `\n  `, mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token property\"\n  }), `display`), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), `:`), ` block`, mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), `;`), `\n  `, mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token property\"\n  }), `mask-image`), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), `:`), ` `, mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token function\"\n  }), `linear-gradient`), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), `(`), `to bottom`, mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), `,`), ` white`, mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), `,`), ` transparent`, mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), `)`), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), `;`), `\n`, mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), `}`)))), mdx(\"p\", null, `As well as the rendered result:`), mdx(\"p\", {\n    style: {\n      \"position\": \"relative\",\n      \"background\": \"linear-gradient(to right, blue, red)\",\n      \"fontFamily\": \"system-ui\",\n      \"fontWeight\": \"bold\",\n      \"maxWidth\": \"30rem\",\n      \"color\": \"white\",\n      \"padding\": \"20px\",\n      \"borderRadius\": \"20px\",\n      \"margin\": \"2rem auto 0\"\n    }\n  }, mdx(\"span\", {\n    style: {\n      \"display\": \"block\",\n      \"maskImage\": \"linear-gradient(to bottom, white, transparent)\"\n    }\n  }, \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non pharetra lorem, ac feugiat nunc. Maecenas ac aliquet turpis. Pellentesque interdum turpis tortor, ac rhoncus nisi egestas et. Sed in ante diam. Proin ac vehicula velit. Ut fringilla mauris quis lobortis efficitur.\")), mdx(\"p\", null, `Like the `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `background-clip`), ` technique the words are still individually selectable, and text fades into the background evenly across the gradient. Because this is a mask across your element however, the specific colors of your text are preserved.`), mdx(\"p\", {\n    style: {\n      \"position\": \"relative\",\n      \"background\": \"linear-gradient(to right, blue, red)\",\n      \"fontFamily\": \"system-ui\",\n      \"fontWeight\": \"bold\",\n      \"maxWidth\": \"30rem\",\n      \"color\": \"white\",\n      \"padding\": \"20px\",\n      \"borderRadius\": \"20px\",\n      \"margin\": \"2rem auto 0\"\n    }\n  }, mdx(\"span\", {\n    style: {\n      \"display\": \"block\",\n      \"maskImage\": \"linear-gradient(to bottom, white, transparent)\",\n      \"WebkitMaskImage\": \"linear-gradient(to bottom, white, transparent)\"\n    }\n  }, \"Emojis: \\uD83D\\uDE2C\\uD83E\\uDEE3\\uD83D\\uDE31\\uD83D\\uDE80\\u2728Lorem ipsum dolor sit amet, consectetur adipiscing elit.\", mdx(\"br\", null), \"Lorem \", mdx(\"a\", {\n    href: \"#\",\n    style: {\n      \"color\": \"hotpink\"\n    }\n  }, \"My hotpink link\"), \" ipsum dolor sit amet, consectetur adipiscing elit. Donec non pharetra lorem\")), mdx(\"h3\", {\n    \"id\": \"browser-support-1\"\n  }, `Browser support`), mdx(\"p\", null, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `mask-image`), ` has been supported across evergreen browsers since 2017, so a little less than `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `background-clip`), `. The earlier mentioned `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `mask-mode`), ` has only been available since December 2023 when support landed in Chromium (both Safari and Firefox had support for it since 2022 and 2017 respectively). Currently for Edge support you still need to include the prefixed `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `-webkit-`), ` version:`), mdx(\"div\", {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"css\"\n  }, mdx(\"pre\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"language-css\"\n  }), mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-css\"\n  }), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token selector\"\n  }), `span`), ` `, mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), `{`), `\n  `, mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token property\"\n  }), `display`), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), `:`), ` block`, mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), `;`), `\n  `, mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token property\"\n  }), `-webkit-mask-image`), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), `:`), ` `, mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token function\"\n  }), `linear-gradient`), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), `(`), `to bottom`, mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), `,`), ` white`, mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), `,`), ` transparent`, mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), `)`), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), `;`), `\n  `, mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token property\"\n  }), `mask-image`), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), `:`), ` `, mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token function\"\n  }), `linear-gradient`), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), `(`), `to bottom`, mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), `,`), ` white`, mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), `,`), ` transparent`, mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), `)`), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), `;`), `\n`, mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), `}`)))), mdx(\"p\", null, `I'm not sure why Edge specifically has this, as it's running the same version of Chromium as Chrome and Polypane, which don't need it. So that's a little complication you have to be aware of.`), mdx(\"h3\", {\n    \"id\": \"downsides-1\"\n  }, `Downsides`), mdx(\"p\", null, `The main downside of `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `mask-image`), ` is that it also masks the selection style of your text. When selecting the text with the `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `background-clip`), ` technique it becomes clearly readable because the selection undoes the background clip. With `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `mask-image`), ` the selection is also faded, which makes the text harder to read.`), mdx(\"p\", null, `The browser support for the unprefixed version is relatively new, so for backwards compatibility you also need the prefixed properties. It's a little more flexible than `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `background-clip`), ` because it doesn't change the color of your text, though that might be a downside if you `, mdx(\"em\", {\n    parentName: \"p\"\n  }, `do`), ` want to change the color of your text.`), mdx(\"h2\", {\n    \"id\": \"fading-text-content\"\n  }, `Fading text content`), mdx(\"p\", null, `So that's two ways to fade text content. `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `mask-image`), ` is a little more flexible, but `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `background-clip`), ` is a little more widely supported. Both are great ways to fade text content, and I hope you can use them in your projects!`));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":4,"tableOfContents":{"items":[{"url":"#technique-one-background-clip","title":"Technique one: background-clip","items":[{"url":"#browser-support","title":"Browser support"},{"url":"#downsides","title":"Downsides"}]},{"url":"#technique-two-mask-image","title":"Technique two: mask-image","items":[{"url":"#browser-support-1","title":"Browser support"},{"url":"#downsides-1","title":"Downsides"}]},{"url":"#fading-text-content","title":"Fading text content"}]},"excerpt":"Two days ago Amit Merchant wrote a blog post on  a technique to fade text out  using an overlaid element based on the design of  Trunk.io . He walks through how…","frontmatter":{"title":"My take on fading content using transparent gradients in CSS","cover":"/blogs/fading-content/cover.svg","date":"2024-01-19","updated":null},"fields":{"slug":"/blog/my-take-on-fading-content-using-transparent-gradients-in-css/","date":"2024-01-18T23:00:00.000Z","ogFileName":"my-take-on-fading-content-using-transparent-gradients-in-css"}}},"pageContext":{"slug":"/blog/my-take-on-fading-content-using-transparent-gradients-in-css/"}},"staticQueryHashes":["4164364741","425175329"]}