| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| .box { |
| width: 200px; |
| height: 200px; |
| margin: 20px; |
| background-color: green; |
| -webkit-filter: url(#merge); |
| filter: url(#merge); |
| } |
| </style> |
| </head> |
| <body> |
| <div class="box"></div> |
| <svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" version="1.1"> |
| <defs> |
| <filter id="merge" x="-0.5" y="-0.5" width="2" height="2"> |
| <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="40" dy="40" in="trans" result="offset1"/> |
| <feOffset dx="80" dy="80" in="trans" result="offset2"/> |
| <feOffset dx="120" dy="120" in="trans" result="offset3"/> |
| <feMerge> |
| <feMergeNode in="trans"/> |
| <feMergeNode in="offset1"/> |
| <feMergeNode in="offset2"/> |
| <feMergeNode in="offset3"/> |
| </feMerge> |
| </filter> |
| </defs> |
| </svg> |
| </body> |
| </html> |
