今年4月19日にリリースされた Firefox52 で、これまで部分サポートだった mask系の CSS が使えるようになりました。
完全サポートで、ベンダープレフィックスも不要です。
これまでは Chrome など webkit系ブラウザでしか表現できなかったデザインが Firefox で可能になったことにより、またも Microsoft の Internet Explorer と Edge だけが後れを取った形です。

※本記事は なるべく Firefox の最新版で御覧下さい。
Chrome、Safari、Opera では一部、IE と Edge では全てのサンプルが正しく表示されません。
では、mask系CSSプロパティについて、概要を見ていきましょう。
設定の仕方はbackgroundプロパティとよく似ています。 ※サンプルの背景色
は、透明部分をわかりやすくするためにつけてあります。

mask-imageプロパティ

    mask-image: url(url)
    PNG、GIF、SVG など、透過部分を持った画像をマスクに指定します。
    ×
    =
    マスク部分は隠れるのではなく、表示される、ということに注意して下さい。
    透明化処理から保護するためのマスク、というイメージです。
    .mask1{
      -webkit-mask-image: url(マスク用画像のURL);
      mask-image: url(マスク用画像のURL);
    }
    webkit系ブラウザのためのベンダープレフィックス-webkit-は常に、このように並記する必要がありますが、以下のコード例では省略しています。
    mask-image: url(url1, url2, ...)
    マスク用の画像は複数指定できます(Firefox のみ)。
    これはちょっとナンセンスな例ですが…
    ×
    =
    ×
    ×
    =
    .mask2{
      mask-image: url(マスク用画像1のURL), url(マスク用画像2のURL);
    }
    複数のマスク用画像が合成されてひとつのマスクになります。
    mask-image: linear-gradient()
    CSSでグラデーションを指定します。
    こちらはマスク用の画像を用意しなくていいので、より手軽です。
    また、PNGなどラスタ画像のマスクに比べると、拡大してもグラデーションが滑らかで美しいです。
    ×
    CSS
    =
    .mask3{
      mask-image: linear-gradient(-90deg, transparent 0%, blue 30%, blue 70%, transparent 100%);
    }
    色指定でblueにしているところは、完全な透明色以外なら何でもいいです。
    mask-image: radial-gradient()
    (楕)円形グラデーションにはradial-gradient()関数を使います。
    ×
    CSS
    =
    .mask4{
      mask-image: radial-gradient(closest-side, blue 80%, transparent 100%);
    }
    古いバージョンの weblit系ブラウザでは
    -webkit-gradient(radial, 開始位置, 開始位置の半径, 終了位置, 終了位置の半径, from(開始色), color-stop(位置, 途中色), to(終了色))
    というややこしい書き方をしなければならなかったようですが、最新版では普通にradial-gradient()-webkit-をつけるだけでちゃんと反映されますね。

mask-repeatプロパティ

同じマスクをリピート表示し、タイルのように並べることができます。
ここでは Google先生からお借りしたこちらのブクマアイコンのSVG画像ic_bookmark_48px.svgを、マスクとして使用させていただきます。
    mask-repeat: repeat
    マスクが縦横にリピートされます。
    fksco
    .mask5{
      mask-image: url(ic_bookmark_48px.svg);
      mask-repeat: repeat;
    }
    mask-repeat: space
    マスクを適用する要素の大きさに合せて、マスクが見切れないように、いい感じに余白が入ります。
    マスクの表示開始位置を指定するmask-positionプロパティは無視されます。
    fksco
    .mask6{
      mask-image: url(ic_bookmark_48px.svg);
      mask-repeat: space;
    }

    mask-repeat: round
    上とほぼ同じですが、mask-positionプロパティを指定して、マスクの表示位置をずらすことができます。
    fksco
    .mask7{
      mask-image: url(ic_bookmark_48px.svg);
      mask-repeat: round;
      mask-position: 24px 24px;
    }

    mask-repeat: repeat-x
    マスクは横方向にだけ繰り返されます。
    mask-repeat: repeat-y
    マスクは縦方向にだけ繰り返されます。
    mask-repeat: no-repeat
    マスクは一つだけ表示されます。

mask-sizeプロパティ

マスクの大きさを変えます。単位は px%emremなど。
%は親要素に対する比率です。
calc(100%/n)を指定すると、ちょうどn分割されます(IE8以下とAndroid4.3以下は非対応)。
    fksco

    .mask8{
      mask-image: url(ic_bookmark_48px.svg);
      mask-repeat: space;
      mask-size: 96px;
    }

mask-modeプロパティ

このプロパティは、今のところ Firefox だけがサポートしています。
    mask-mode: alpha
    何も指定しなければこれが適用されます(初期値)。
    マスク画像の不透明度(アルファ値)に応じてマスク処理が行われます。
    上の例はすべてこれです。
    mask-mode: luminance
    色の明るい部分がマスクされ、暗くなるほど透明化処理がされます。
    アルファチャンネルを持たないJPG画像をマスクとして使うことができます。
    ×
    =
    mask9{
      mask-image: url(マスク用画像のURL);
      mask-mode: luminance;
    }
参考サイト様
MDN|MOZILLA DEVELOPER NETWORK