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 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…

  2. 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…

  3. 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…

  4. screenshot of Solved By Modern CSS: Section Layout

    Ahmad Shadeed avatar Ahmad Shadeed

    Solved By Modern CSS: Section Layout

    • Nicolas Hoizey
    • 24 October 2025
    • CSS, container queries
    • 18 reactions

    In this article, I took a typical section design and made it more dynamic with container queries, has, clamp, and grid. It’s an example of the potential…

  5. screenshot of Tailwind's @apply Feature is Better Than it Sounds

    Zell Liew

    Tailwind's @apply Feature is Better Than it Sounds

    • Nicolas Hoizey
    • 11 April 2025
    • CSS, Sass, Tailwind
    • 2 reactions

    Tailwind’s utilities are very powerful by themselves, but they’re even more powerful if you allow yourself to use @apply (and allow yourself to…

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