You can use the CSS property
mask-image
Show archive.org snapshot
to define an "alpha channel" for an element.
E.g. to let an element start at full opacity at the top and gradually fade into transparency at the bottom:
.box {
-webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
}
mask-image
, e.g. mask-url: url(mask.svg)
. In the example we are using the linear-gradient()
function to define an image dynamically.mask-image
is supported in
all modern browsers
Show archive.org snapshot
.
You still need the -webkit
prefix for most of them (
autoprefixer
Show archive.org snapshot
will add it for you).