{"id":2828,"date":"2024-06-26T07:38:28","date_gmt":"2024-06-26T13:38:28","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=2828"},"modified":"2024-06-26T07:40:10","modified_gmt":"2024-06-26T13:40:10","slug":"text-reveal-with-conic-gradient","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/text-reveal-with-conic-gradient\/","title":{"rendered":"A Text-Reveal Effect Using conic-gradient() in CSS"},"content":{"rendered":"\n

Part of the appeal of the web as a design medium is the movement. The animations, transitions, and interactivity. Text can be done in any medium, but text that reveals itself<\/em> over time in an interesting way? That’s great for the web. Think posters, galleries, banners, advertisements, or even something as small as spoiler-reveal effects, “reveal” animations can be entirely delightful. In this article, we\u2019ll look at one fairly simple method for doing this with CSS. <\/p>\n\n\n\n

Here\u2019s the outcome, incorporating a play button to show you it can be done via user interaction:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

This is achieved with the help of \u201cmasking<\/em>\u201d and perfectly placed conic-gradient()<\/a><\/code>. The browser support for conic gradients<\/a> is fine, but we’re also going to be using CSS’ @property<\/a><\/code> here which isn’t in stable Firefox yet, but is in Firefox Nightly.<\/p>\n\n\n\n

Note<\/strong>: Masking is a graphic technique where portion of a graphic or image is hidden based on the graphic or image layered over and\/or under it, based on either the alpha channel or the light\/darkness of masking image.<\/p>\n\n\n\n

In our example, the masking<\/em> is done using CSS Blend Mode<\/a>. I\u2019ll mention later why this is the method I\u2019d chosen instead of CSS Mask (the mask-image<\/a><\/code> property).<\/p>\n\n\n\n

Let\u2019s get started with the HTML. Some black text on a white background is a good place to start. This is technically our \u201cmask\u201d.<\/p>\n\n\n

<p<\/span>><\/span>Marasmius rotula is... <\/p<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n
p<\/span> {\n  background<\/span>: white;\n  font-size<\/span>: 34px<\/span>;\n  line-height<\/span>: 42px<\/span>;\n  text-align<\/span>: justify;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n
A container element is added around the text to serve as the graphic to be shown through<\/em> the mask\/text. Also, a CSS variable is used in the container element to assign the line-height<\/a><\/code>. This variable will later be used in the gradient.<\/p>\n\n\n
<section<\/span> class<\/span>=\"text\"<\/span>><\/span>\n  <p<\/span>><\/span>Marasmius rotula...<\/p<\/span>><\/span>\n<\/section<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n
section<\/span>.text<\/span> {\n<\/span><\/span>  width<\/span>: 420px<\/span>;\n<\/span><\/span>  --lH<\/span>: 42px<\/span>; \/* line height *\/<\/span> \n<\/span><\/mark>  \n<\/span><\/span>  p {\n<\/span><\/span>    background<\/span>: white;\n<\/span><\/span>    font-size<\/span>: 34px<\/span>;\n<\/span><\/span>    line-height<\/span>: var<\/span>(--lH);\n<\/span><\/mark>    text-align<\/span>: justify;\n<\/span><\/span>  }\n<\/span><\/span>}\n<\/span><\/span><\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
section<\/span>.text<\/span> {\n<\/span><\/span>  width<\/span>: 420px<\/span>;\n<\/span><\/span>  --lH<\/span>: 42px<\/span>; \/* line height *\/<\/span> \n<\/span><\/span>  background<\/span>: repeat-y left\/100%<\/span> var<\/span>(--lH) conic-gradient<\/span>(white 265deg<\/span>, red 269deg<\/span> 271deg<\/span>, white 275deg<\/span>), white;\n<\/span><\/mark>  \n<\/span><\/span>  p {\n<\/span><\/span>    background<\/span>: white;\n<\/span><\/span>    font-size<\/span>: 34px<\/span>;\n<\/span><\/span>    line-height<\/span>: var<\/span>(--lH);\n<\/span><\/span>    text-align<\/span>: justify;\n<\/span><\/span>  }\n<\/span><\/span>}\n<\/span><\/span>\n<\/span><\/span><\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
We won\u2019t see anything yet since the \u201cblack text with white background\u201d, <p><\/code>, is blocking the gradient behind it. However, the gradient looks like this:<\/p>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n
We’ll now turn the gradient into an animation, where it grows from zero width to however much width is needed for it to cover the entire text. For the moment, let\u2019s make this transition animation to take place when we hover<\/code> the cursor on the text.<\/p>\n\n\n
@property<\/span> --n {\n<\/span><\/mark>  syntax<\/span>: \"<length-percentage<\/span>>\";\n<\/span><\/mark>  inherits<\/span>: false<\/span>;\n<\/span><\/mark>  initial-value<\/span>: 0%;\n<\/span><\/mark>}\n<\/span><\/mark>\n<\/span><\/span>section<\/span>.text<\/span> {\n<\/span><\/span>  width<\/span>: 420px<\/span>;\n<\/span><\/span>  --lH<\/span>: 42px<\/span>; \/* line height *\/<\/span> \n<\/span><\/span>  background<\/span>: \n<\/span><\/span>  repeat-y left\/var<\/span>(--n) var<\/span>(--lH) conic-gradient<\/span>(white 265deg<\/span>, red 269deg<\/span> 271deg<\/span>, white 275deg<\/span>), white;\n<\/span><\/span>  \n<\/span><\/span>  p {\n<\/span><\/span>    background<\/span>: white;\n<\/span><\/span>    font-size<\/span>: 34px<\/span>;\n<\/span><\/span>    line-height<\/span>: var<\/span>(--lH);\n<\/span><\/span>    text-align<\/span>: justify;\n<\/span><\/span>  }\n<\/span><\/span>}\n<\/span><\/span>\n<\/span><\/span>section<\/span>.text<\/span>:hover<\/span> {\n<\/span><\/mark>  --n<\/span>: 340%<\/span>;\n<\/span><\/mark>  transition<\/span>: --n linear 2s<\/span>;\n<\/span><\/mark>}\n<\/span><\/mark><\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
The --n<\/code> custom property is used to assign the size of the gradient. Its initial value is 0%<\/code>, which increases with a transition<\/code> effect when the text is hovered, and hence the gradient grows in width.<\/p>\n\n\n\n
We still haven\u2019t masked<\/em> our example. So, once again, only the text will be visible. Let me show you how the gradient animates, separately, below:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Note<\/strong>: @property<\/a><\/code> creates a custom property that has a known type<\/em>, hence the property value can be animated. The custom property may not have been able to be animated otherwise.<\/p>\n\n\n\n
Let\u2019s now drop the blend mode (the mix-blend-mode<\/a><\/code> property) into the <p><\/code> element to finally see the effect.<\/p>\n\n\n
@property<\/span> --n {\n<\/span><\/span>  syntax<\/span>: \"\";\n<\/span><\/span>  inherits<\/span>: false<\/span>;\n<\/span><\/span>  initial-value<\/span>: 0%;\n<\/span><\/span>}\n<\/span><\/span>\n<\/span><\/span>section<\/span>.text<\/span> {\n<\/span><\/span>  width<\/span>: 420px<\/span>;\n<\/span><\/span>  --lH<\/span>: 42px<\/span>; \/* line height *\/<\/span> \n<\/span><\/span>  background<\/span>: \n<\/span><\/span>  repeat-y left\/var<\/span>(--n) var<\/span>(--lH) conic-gradient<\/span>(white 265deg<\/span>, red 269deg<\/span> 271deg<\/span>, white 275deg<\/span>), white;\n<\/span><\/span>  \n<\/span><\/span>  p {\n<\/span><\/span>    mix-blend-mode<\/span>: screen;\n<\/span><\/mark>    background<\/span>: white;\n<\/span><\/span>    font-size<\/span>: 34px<\/span>;\n<\/span><\/span>    line-height<\/span>: var<\/span>(--lH);\n<\/span><\/span>    text-align<\/span>: justify;\n<\/span><\/span>  }\n<\/span><\/span>}\n<\/span><\/span>\n<\/span><\/span>section<\/span>.text<\/span>:hover<\/span> {\n<\/span><\/span>  --n<\/span>: 340%<\/span>;\n<\/span><\/span>  transition<\/span>: --n linear 2s<\/span>;\n<\/span><\/span>}\n<\/span><\/span><\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
For the sake of operability, instead of on text hover, I\u2019ll move the animation to take place with user controls, Play<\/em> and Reset<\/em>. Here\u2019s the final output:<\/p>\n\n\n\n
Now, we write up a conic-gradient()<\/a><\/code> as the background<\/code> for the <section><\/code> container, with the gradient\u2019s height same as the para\u2019s line-height<\/code>, and set to repeat for each line of text. The gradient should look like an arrow (triangular at the tip) passing through the text.<\/p>\n\n\n