Mask Image, Create Rectangle from Multiple Gradients

Mask Image, create rectangle from multiple gradients

The trick with multiple mask is to control the size/position so that each one will apply to a region of your element:

.box {
  height:300px;
  width:300px;
  background: url(https://picsum.photos/id/1003/300/300);
  -webkit-mask: 
     linear-gradient(to top,    transparent,#fff) top   /100% 20%,
     linear-gradient(to bottom, transparent,#fff) bottom/100% 20%,
     linear-gradient(to left  , transparent,#fff) left  /20% 100%,
     linear-gradient(to right , transparent,#fff) right /20% 100%;
  -webkit-mask-repeat:no-repeat;
  
  mask: 
     linear-gradient(to top,    transparent,#fff) top   /100% 20%,
     linear-gradient(to bottom, transparent,#fff) bottom/100% 20%,
     linear-gradient(to left  , transparent,#fff) left  /20% 100%,
     linear-gradient(to right , transparent,#fff) right /20% 100%;
  mask-repeat:no-repeat;
}

body {
  background:pink;
}

<div class="box"></div>

How to make a rectangular transparency gradient CSS3?

Unfortunately mask-image property (which i used in order to achieve elliptic ones) does not have rectangular-gradient option.

You can build it with multiple mask:

.foto_1 {  -webkit-mask:    linear-gradient(to right ,rgba(0,0,0,0.2) ,white ,rgba(0,0,0,0.2)),    linear-gradient(to bottom,rgba(0,0,0,0.2) ,white ,rgba(0,0,0,0.2));  mask:    linear-gradient(to right ,rgba(0,0,0,0.2) ,white ,rgba(0,0,0,0.2)),    linear-gradient(to bottom,rgba(0,0,0,0.2) ,white ,rgba(0,0,0,0.2));  -webkit-mask-composite: source-in; /* For Chrome */  mask-composite: intersect; /* For Firefox */}

<img src="https://i.stack.imgur.com/HGRgk.jpg" alt="Sample Image"><img class="foto_1" src="https://i.stack.imgur.com/HGRgk.jpg" alt="Sample Image">

Applying multiple mask-image to a single div

You need to play with the size and position. mask work the same way as background-image so simply imagine your self making two images on the same element (one on the top and the other on the bottom)

div {
  width: 200px;
  height: 200px;
  background-color: green;
  border: 2px solid black;
  -webkit-mask: 
     radial-gradient( circle at center top,    transparent 30px, black 31px) top, 
     radial-gradient( circle at center bottom, transparent 30px, black 31px) bottom;
  -webkit-mask-size:100% 51%; /* each one half the size */
  -webkit-mask-repeat:no-repeat; /* don't forget this */
}

<div></div>

Multiple gradients on one BufferedImage

Solution to this problem is using this (as pointed in the comment by @JanDvorak : Merging two images

The exact code I use is this:

public static BufferedImage mergeImages2(BufferedImage base, Collection<Light> images) {
    BufferedImage output = new BufferedImage(base.getWidth(), base.getHeight(), BufferedImage.TYPE_INT_ARGB);

    Graphics2D g = output.createGraphics();
    g.drawImage(base, 0, 0, null);
    g.setComposite(AlphaComposite.getInstance(AlphaComposite.SRC_IN, 1.0f));
    for (Light l : images) {
        g.drawImage(l.LIGHT_IMAGE, l.x, l.y, null);
        l.LIGHT_IMAGE.flush();
    }
    g.dispose();
    output.flush();
    return output;
}

NOTE: This solves the problem but produces memory leaks, which I have described hoping for some help here: BufferedImage.createGraphics() memory leak

Adding a border to a mask image created with a radial gradient

add a gradient coloration using the same radial-gradient:

div {
  width: 200px;
  height: 200px;
  background: 
     radial-gradient(
      circle at center top,
      transparent 30px,
      black 30px 32px,
      green 33px
    ) border-box;
  border: 2px solid black;
  
  -webkit-mask-image: radial-gradient(
    circle at center top,
    transparent 30px,
    black 31px
  );
}

<div>

</div>

Mask Image, Create Rectangle from Multiple Gradients