<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .el {
      width: 400px;
      height: 400px;
      margin-bottom: 10px;
      -webkit-mask-size: 400px;
    }

    .el-1 {
      background: purple;
      -webkit-mask-image: url("http://cdn.onlinewebfonts.com/svg/img_4507.png");
      -webkit-mask-repeat: no-repeat;
    }

    .el-2 {
      -webkit-mask-image: url(http://cdn.onlinewebfonts.com/svg/img_4507.png);
      -webkit-mask-repeat: no-repeat;
      background-image: url(https://images.unsplash.com/photo-1473172707857-f9e276582ab6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8);
      background-size: cover;
    }

    .el-3 {
      -webkit-mask-image: url(https://i.ibb.co/Tmv58d5/02.png);
      background: linear-gradient(red, blue);
      mask-type: luminance;
    }

    .el-4 {
      background: url(https://www.w3schools.com/css/img_5terre.jpg) center center no-repeat;
      -webkit-mask-image: linear-gradient(black, transparent);
    }

    .el-5 {
      background: url(https://www.w3schools.com/css/img_5terre.jpg) center center no-repeat;
      -webkit-mask-image: radial-gradient(circle,
          black 50%,
          rgba(0, 0, 0, 0.5) 50%);
      mask-image: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
    }
  </style>
</head>

<body style="background: #000; display: flex;justify-content: center;flex-direction: column">
  <div class="el el-1"></div>
  <div class="el el-2"></div>
  <div class="el el-3"></div>
  <div class="el el-4"></div>
  <div class="el el-5"></div>
</body>

</html>
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.