Developer Docs - Mobile Docs - Masks

Transparent gradient images to overlay on images for a beautiful design.

The goal of any content strategy should be extensibility. In order to achieve rich designs, you need images that are crafted for each medium and use case. You probably don't want to spend time having to create different variations of each image though. To assist with that, we've designed a powerful masking system that can be used with images and cards, reducing the number of custom images needed in your mobile applications.

These image masks can be referenced directly within the Source of an Image, or you can apply them automatically inside the card components. For Block Card and Contained Card, the mask is placed on the image, while the mask for Inline Card is placed over the entire card. This makes sense as the image on an Inline card takes up the full background.

Built-In Masks

While you can provide your own masks via a URL, you can save load time and bandwidth by using one of the built-in masks. These are highlighted below.

These masks give you several different options to start from. Using image transformations like Fill Color Flip, and Tint will provide additional customize to achieve your desired look. Learn more about Layering Images to design beautiful cards and graphics in your apps!

Designing With Masks

As you set out to design with masks, keep in mind that the best designs will be a recipe that incorporates the properties of the card, image, and mask. Take for example the design below. The effect of the card comes from the card's background, the effects on the image as well as the mask.


    Bring to the table win-win survival strategies...