CSS Tips: Different postures for achieving text lightening effect with CSS

In the Web, we often encounter the effect of text fading. The text fading mentioned here is not the animation effect of fading in and out, but a visual effect of text (or elements). Its significant feature is that it gradually becomes invisible from clarity, for example, the text in a container gradually becomes invisible from top to bottom, or the closer it is to the edges of the container, the less visible it becomes.

It is not difficult to notice that the command line text on the right side of the picture gradually fades from top to bottom and becomes invisible. Next, let’s take a look at what methods CSS has to achieve this effect and what are the advantages and disadvantages of each method.

Diamond Rank: Overlay

Usually, most web developers choose to overlay a gradual change layer over the text.

<div class="container">
    <p><!-- 文本内容 --></p>
    <div class="gradient"><!-- 渐变层 --></div>
</div>

.container {
    position: relative;
    overflow: hidden;

    .gradient {
        position: absolute;
        inset:  0;
        background: linear-gradient(180deg, transparent 0, oklch(0.14 0 0) 100%);
    }
}

The effect you will see is as follows:

As you can see, by absolute positioning, the .gradient element is positioned on the four sides of the .container container ( inset: 0 ). .gradient only does one thing, drawing itself a linear gradual change background through linear-gradient() , with a transparent color at the top transparent and a black oklch(0.14 0 0) at the bottom.

Here’s a little trick. You can adjust the first value of the inset property (equivalent to the value of top ) to adjust the height of the gradual change layer to make the text fade more or less. In addition, you can also fine-tune the second color in the gradual change to fade the text to any color you want (usually the same as the background color of the text container).

Note that you can also use other gradual changes to achieve different styles of text lightening effects, such as achieving a circular text lightening effect through radial gradual change. I won’t show it here, interested colleagues can try it. In addition, the example uses the oklch() function to describe colors, which is a new function for describing colors in modern CSS . There is also a similar oklab() that can be used to define high definition colors for the web . If you are interested, you can read the article " OKLCH and OKLAB in CSS ".

Another tip is that you can also use CSS pseudo-elements :: before or :: after instead of .gradient elements, and use CSS Grid layout to place gradual change layers through grid areas, so that the gradual change layer no longer needs to apply absolute positioning:

<div class="wrapper">
    <div class="container">
        <div class="content">
            <p><!-- 淡化文本都放在 content 容器中 --></p>
        </div>
    </div>
</div>

.wrapper {
    container-type: inline-size;
    min-width: 50vw;
}

.container {
    overflow: hidden;
    display: grid;
     
    .content {
        grid-area: 1 / 1 / -1 / -1;
    }
    &::after {
        content: "";
        grid-area: 1 / 1 / -1 / -1;
        width: 100%;
        height: 100%;
        z-index: 2;
        background: linear-gradient(180deg, transparent 0, oklch(0.14 0 0) 100%);
        align-self: end;
    }
}

The above example still applies some new knowledge, such as CSS container query , grid placement in grid layout , grid alignment method , etc. Especially pay attention to the height of the pseudo element :: after . The example application is 100% , and we need to find a reference object, otherwise the calculated height will be 0 . This phenomenon should be encountered by many colleagues.

For more information on CSS Grid Layouts, read CSS Grid Layouts in Modern Web Layouts !

Starlight rank: background-clip

I think you may have noticed that using overlay to achieve text lightening has two obvious drawbacks.

• The text behind the overlay layer (gradual change layer) is not selectable, which is fatal for web accessibility. If the text contains jump links, etc., it will lose its original function
• This effect only applies to solid color backs

The first problem is easily solved by setting the user-select and point-events properties on the overlay:

.container::after {
    user-select: none;
    pointer-events: none;
}

If we want to solve the second problem, which is to achieve the effect of text lightening on non-pure color backgrounds (such as images or gradual change backgrounds), we need to use different methods. In order to make it work in this situation, we actually need to lighten the text, rather than making it look lighter.

There are several different ways to achieve this effect in CSS, one of which is gradual change of text.

<div class="container">
    <!-- 容器带有一个渐变色 -->
    <div class="content">
        <!-- 需要淡化的文本 -->
        <p></p>
    </div>
</div>

.container {
    background: linear-gradient(to bottom, #ad3e1b, #ff0770);
    
    .content {
        background: linear-gradient(to bottom, white, transparent);
        color: transparent;
        background-clip: text;
    }
}

There is a detail to note when using this method. The text color needs to be explicitly set to transparent, such as color: transparent , and the background-clip needs to be set to text . Only in this way can the effect of gradual change color filling the text be achieved. This method truly achieves the effect of text fading. You can also adjust the position and size of text fading by adjusting the background-size and background-position .

Another thing to note is that the text’s gradual change color needs to go from text color to transparency. Please note how the text fades evenly throughout the gradual change, and each word is still selectable because we haven’t overlaid anything on top of the text.

Of course, this technique also has its own shortcomings. Since the text is now transparent ( color: transparent ), it uses gradual change filling. If your content has different colors for links or other elements (such as emojis), these colors will be replaced (emoji colors are replaced) or will not fade (link colors will not fade):

If you want to preserve these colors and lighten the content, you need to use more advanced techniques.

King’s rank: Masking

CSS mask technology is a more advanced technique . We can use gradual change applied to overlay layers for mask-image , as a mask layer, similar to how it works in a graphic editor.

Usually, the transparent channel (Alpha) of the mask image is used to determine which parts of the element are visible and which are not, but you can set the mask-mode to luminance and use a black and white mask. However, for our purposes, the transparent channel (Alpha) is sufficient.

<div class="container">
    <!-- 容器带有一个渐变色 -->
    <div class="content">
        <!-- 需要淡化的文本 -->
        <p></p>
    </div>
</div>

.container {
    background: linear-gradient(to bottom, #ad3e1b, #ff0770);
    
    .content {
      mask-image: linear-gradient(to bottom, white, transparent);
    }
}

Similarly, you can adjust the position and size of the mask layer by adjusting the mask-size and mask-position to achieve different lightening effects. Of course, changing the mask layer effect is the same!

If you have never been exposed to CSS masking related knowledge, or want to learn more about the technology, I personally recommend that you move to read “CSS Clipping and Masking “!

Summary

As mentioned earlier, there are various ways to achieve text lightening in CSS, and this effect can also be applied to many scenarios in the web. For example, the content explained in the course “ Defensive CSS Insights “ in “ How to improve the readability of text on images? “ can also be applied to these techniques.