---
title: "My take on fading content using transparent gradients in CSS"
url: https://daily.dev/posts/my-take-on-fading-content-using-transparent-gradients-in-css-vmpbrxtdo
source_url: https://polypane.app/blog/my-take-on-fading-content-using-transparent-gradients-in-css
type: article
source: "Polypane"
published: 2026-06-28T11:35:28.109Z
updated: 2026-06-28T11:36:14.994Z
tags: ["webdev", "css"]
reading_time: 7
upvotes: 0
comments: 0
language: en
---

> ## Documentation Index
> Fetch the complete documentation index at: https://daily.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# My take on fading content using transparent gradients in CSS

**[Polypane](https://daily.dev/sources/polypane)** · 7 min read · 0 upvotes · 0 comments

## Summary

A comparison of two CSS techniques for fading text content using transparent gradients. The first uses `background-clip: text` combined with `color: transparent` and a gradient background, which is widely supported but strips custom text colors (links, emoji). The second uses `mask-image` with a gradient, which preserves individual text colors but fades selection highlights and requires the `-webkit-` prefix for Edge. Both techniques keep text selectable, unlike the overlay approach they improve upon. Browser support details and code examples are provided for each.

## Full article

daily.dev links to this article rather than hosting it. Read it at the original source: <https://polypane.app/blog/my-take-on-fading-content-using-transparent-gradients-in-css>

## Similar posts on daily.dev

- [An animated radial gradient mask over text in CSS](https://daily.dev/posts/an-animated-radial-gradient-mask-over-text-in-css-ob8mcbski) · Cassidy's blog · 79 upvotes · 11 comments

---

Tags: [#webdev](https://daily.dev/tags/webdev), [#css](https://daily.dev/tags/css)

[View this post on daily.dev](https://daily.dev/posts/my-take-on-fading-content-using-transparent-gradients-in-css-vmpbrxtdo)