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 online protection

Rails Long Term Support

Rails LTS provides security patches for old versions of Ruby on Rails (2.3, 3.2, 4.2 and 5.2)

  • Prevents you from data breaches and liability risks
  • Upgrade at your own pace
  • Works with modern Rubies
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)