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%);
}
- A fully opaque black pixel will render the masked pixel fully opaque
- A fully transparent black pixel will render the masked pixel fully transaprent
- You may pass any image as the value of
mask-image, e.g.mask-url: url(mask.svg). In the example we are using thelinear-gradient()function to define an image dynamically.
Browser support
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).
Posted by Henning Koch to makandra dev (2020-03-13 12:10)