Jump to main content

Nicolas Hoizey

  • articles
  • billets
  • links
  • notes
  • talks
  • archives
  • about

Kilian Valkhof avatar Kilian Valkhof

My take on fading content using transparent gradients in CSS

  • Nicolas Hoizey
  • 19 January 2024
  • CSS
  • 9 reactions
Screenshot of “My take on fading content using transparent gradients in CSS”

https://polypane.app/blog/my-take-on-fading-content-using-transparent-gradients-in-css/

So that's two ways to fade text content. mask-image is a little more flexible, but 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!

9 reactions

7 likes

  1. cute dogo avatar
  2. Stefan Krieger ???? avatar
  3. aarontgrogg avatar
  4. Colin avatar
  5. ༒ ɐɥɔǝʇɐɯ ʍǝɹpuɐ ༒ avatar
  6. Richard the Brave avatar
  7. RealET avatar

2 reposts

  1. Kilian Valkhof avatar
  2. RealET avatar
  • Older: Where have all the flowers gone?
  • Newer: Platform Tilt: Documenting the Uneven Playing Field for an Independent Browser Like Firefox

Related contents with similar topics

  1. screenshot of Controlling when CSS custom property values are computed

    Jake Archibald avatar Jake Archibald

    Controlling when CSS custom property values are computed

    • Nicolas Hoizey
    • 15 September 2026
    • CSS
    • 2 reactions

    When and how CSS custom property values are calculated might not be what you expect, and it has a big impact on your styles.

  2. screenshot of Scroll-Driven Animations

    Josh W. Comeau avatar Josh W. Comeau

    Scroll-Driven Animations

    • Nicolas Hoizey
    • 30 April 2026
    • CSS, animations
    • 4 reactions

    The CSSWG deserves a lot of credit, in my opinion, for repurposing/extending CSS keyframe animations for scroll-driven animations. Rather than invent…

  3. screenshot of Overview of CSS-only scrolling shadows and content fading techniques

    Francesco Schwarz avatar Francesco Schwarz

    Overview of CSS-only scrolling shadows and content fading techniques

    • Nicolas Hoizey
    • 11 February 2026
    • CSS
    • 5 reactions

    When content overflows and the scrollbar is insufficient or intentionally hidden, visual cues such as scroll shadows or fading effects signal that…

  4. screenshot of Try text scaling support in Chrome Canary

    Josh Tumath avatar Josh Tumath

    Try text scaling support in Chrome Canary

    • Nicolas Hoizey
    • 28 January 2026
    • accessibility, em, rem, CSS
    • 1 reaction

    Just like how the tag tells the browser that your website is designed to work for small viewport sizes, the tells the browser, 'Hey, I've designed…

  5. screenshot of A new (or rather, old) approach to typography on the web

    Alvin Leung, Taha Hossain, Shen Gao, Ben Giannis and Rafi Rizky

    A new (or rather, old) approach to typography on the web

    • Nicolas Hoizey
    • 3 December 2025
    • Web, typography, CSS, Design System

    The strongest type systems are opinionated. They respond thoughtfully to the environment they inhabit, carrying a voice that cannot be captured by…

If you want to share an error or suggest an enhancement of this content, please edit the source on GitHub.

© Nicolas Hoizey

Built with Eleventy