Posted 21 days ago. Visible to the public.

Letting a DOM element fade into transparency

You can use the CSS property mask-image 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.

You still need the -webkit prefix for most of them (autoprefixer will add it for you).

Once an application no longer requires constant development, it needs periodic maintenance for stable and secure operation. makandra offers monthly maintenance contracts that let you focus on your business while we make sure the lights stay on.

Owner of this card:

Avatar
Henning Koch
Last edit:
21 days ago
by Henning Koch
About this deck:
We are makandra and do test-driven, agile Ruby on Rails software development.
License for source code
Posted by Henning Koch to makandra dev
This website uses cookies to improve usability and analyze traffic.
Accept or learn more