You can use the CSS property mask-image Show archive.org snapshot to define an "alpha channel" for an element.

UI/UX Design by

We make sure that your target audience has the best possible experience with your digital product. You get:

• Design tailored to your audience
• Proven processes customized to your needs
• An expert team of experienced designers

Read more Show archive.org snapshot

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 the linear-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).