<img src="https://images.unsplash.com/photo-1527126887308-6cdf83c7d844?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1950&q=80" alt="Nasir al-Mulk Mosque in Iran">
img {
  display: block;
  width: 100%; 
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
  mask-image: linear-gradient(to bottom, #009485 20%, #fff 20%, #fff 40%, #f44034 40%, #f44034 60%, #000 60%, #000 80%, #2196f3 0);
  mask-mode: luminance
}



@supports not (mask-mode: luminance) {
  body {
    padding-top: 2em;  
  }
  
  body::before {    
    content: "Your browser doesn't support mask-mode property";
    display: block;
    color: #e43;
    font-weight: bold;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
    line-height: 2em;
    text-align: center;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.