Read more

Letting a DOM element fade into transparency

Henning Koch
March 13, 2020Software engineer at makandra GmbH

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

Illustration web development

Do you need DevOps-experts?

Your development team has a full backlog? No time for infrastructure architecture? Our DevOps team is ready to support you!

  • We build reliable cloud solutions with Infrastructure as code
  • We are experts in security, Linux and databases
  • We support your dev team to perform
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).

Posted by Henning Koch to makandra dev (2020-03-13 13:10)