<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 200px;
height: 200px;
background-color: green;
margin: 20px;
filter: url(#merge);
}
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" version="1.1">
<defs>
<filter id="merge" color-interpolation-filters="sRGB">
<feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.3 0" result="trans"/>
<feOffset dx="-80" dy="-80" in="trans" x="50" y="50" width="150" height="150" result="offsetNeg"/>
<feOffset dx="80" dy="80" in="trans" x="0" y="0" width="150" height="150" result="offsetPos"/>
<feMerge x="40" y="40" width="120" height="120">
<feMergeNode in="offsetNeg"/>
<feMergeNode in="offsetPos"/>
</feMerge>
</filter>
</defs>
</svg>
<div class="box"></div>
</body>
</html>