<!DOCTYPE HTML> <html> <head> <title>Testcase</title> <style> body { margin: 0px; padding: 0px; } #inner { width: 100px; height: 100px; background: linear-gradient(red, blue) no-repeat; background-position: -50px -50px; background-size: 800px 800px; } #outer { margin: 50px 50px 0; width: 100px; height: 100px; clip-path: url(#path); position: fixed; } </style> </head> <body> <div id="outer"> <div id="inner"></div> </div> <svg height="0"> <defs> <clipPath id="path" clipPathUnits="objectBoundingBox"> <polygon points="0.25,0.25 0.25,0.75 0.75,0.75 0.75,0.25"/> </clipPath> </defs> </svg> </body> </html>