fading-content-using-transparent-gradients-in-css/

[utterances-bot]

Fading content using transparent gradient in CSS — Amit Merchant — A blog on PHP, JavaScript, and more

So, I was checking out this trunk.io website recently and while the entire website is a masterpiece in itself, there’s one thing that caught my attention.

https://www.amitmerchant.com/fading-content-using-transparent-gradients-in-css/

[He110te4m]

You can try using border-image. The implementation is simpler and requires no additional elements.

https://codepen.io/t_afif/pen/vYbdVjb

This is where the example comes from: https://www.smashingmagazine.com/2024/01/css-border-image-property/

[Rominou34]

A better solution, in my opinion, is to use a gradient as a mask-image, so it will not be a gradient that will mask the content, but the content itself which will have a gradient, allowing it to work if the background is something other than a flat color.

Here is an example, forking your original codepen.

It is a very powerful property, I have used it some times and it allows to make some beautiful layouts.

[jcubic]

I used the same with pseudo elements, but you need to use pointer-events: none to enable selection, which was mention on Polypane article as downside of your solution.