<!DOCTYPE html> <html reftest-async-scroll reftest-displayport-x="0" reftest-displayport-y="0" reftest-displayport-w="800" reftest-displayport-h="2000" reftest-async-scroll-x="0" reftest-async-scroll-y="50"> <style> html { scrollbar-width: none; } body { height: 4000px; margin: 0; } #clip { position: absolute; top: 500px; left: 300px; background: red; width: 400px; height: 400px; clip-path: inset(0); } #fixed { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(green, blue); } </style> <div id="clip"> <div id="fixed"></div> </div>