mix-blend-mode-and-filter.html (827B)
1 <!-- 2 Any copyright is dedicated to the Public Domain. 3 http://creativecommons.org/publicdomain/zero/1.0/ 4 --> 5 <!DOCTYPE HTML> 6 <html> 7 <head> 8 <style> 9 .parent { 10 /* 11 With the darken blend mode, green will overwrite white parts of this 12 background, while black parts of this background will show through. 13 */ 14 background: linear-gradient(#fff 0%, #fff 50%, #000 50%, #000 100%); 15 width: 100px; 16 height: 100px; 17 } 18 19 .child { 20 filter: blur(3px); 21 mix-blend-mode: darken; 22 background: #0f0; 23 width: 100px; 24 height: 100px; 25 } 26 </style> 27 </head> 28 <body> 29 <!-- 30 You should see a blurred green square, with its bottom half mostly 31 covered by a black rectangle. 32 --> 33 <div class="parent"> 34 <div class="child"></div> 35 </div> 36 </body> 37 </html>