0

I'm trying to make the top 20% of a dynamically sized UL fade its alpha in a linear gradient.

Eg, something like this:

enter image description here

For that image I'm just using a black background for simplicity, but the actual background will be a varied texture and the UL will be sized dynamically, so I can't just slap an image overtop of the UL and hide the top of the UL under the image. Specifically looking to alpha-fade the top of the UL, so the text in the UL's LI items fades into the background below it.

I've tried using the CSS 'opacity' property but it doesn't seem to have any effect:

opacity: linear-gradient(to bottom, 0 0%, 1 100%);

Is there any way to do this?

1337ingDisorder
  • 821
  • 1
  • 6
  • 17
  • Opacity can only be a value from 0 to 1. https://developer.mozilla.org/en-US/docs/Web/CSS/opacity There is a way to do this with `mask-image` however. Just be warned it won't work on IE: https://jsfiddle.net/willihyde/h9tsba47/10/ – willi Oct 25 '21 at 00:30
  • 1
    That mask-image solution is perfect, thanks @willi – 1337ingDisorder Oct 25 '21 at 03:35

0 Answers0