Letting a DOM element fade into transparency

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:

Copy.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).