I'm trying to capture a screenshot using html2canvas. But it creates only the background.

I think it is because I am using linear-gradient for background and -webkit-background-clip.

How can I take a proper screenshot?

<style>
@import url('https://fonts.googleapis.com/css?family=Monoton');
    html, body {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: "Monoton", Helvetica, sans-serif;
        letter-spacing: 5px;
        text-align:center;
    }
    .container {
        background: #ab3428;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 200px;
        height: 200px;
        padding: 20px;
    }
    h1 {
        display: inline;
        font-size: 20px;
        line-height:1.5;
        color: #000000;
        color: transparent;
        background: linear-gradient(7deg, #f5ee9e 50%, #000000 0);
        -webkit-background-clip: text;
    }
  
  #btnSave{
    text-align: center;
    position: fixed;
    top: 0;
    width: 150px;
    z-index: 100;
}

.download-btn{
    font-size: 12px;
    padding: 5px;
    border: 2px solid rgb(33, 33, 33);
    margin: 10px; 
}


</style>
<button class="download-btn" id="btnSave">Download Image</button>
        
<div class="container">
    <h1>TEST</h1> 
</div>
<div id="img-out"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.3.2/html2canvas.min.js" integrity="sha512-tVYBzEItJit9HXaWTPo8vveXlkK62LbA+wez9IgzjTmFNLMBO1BEYladBw2wnM3YURZSMUyhayPCoLtjGh84NQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js" integrity="sha512-Qlv6VSKh1gDKGoJbnyA5RMXYcvnpIqhO++MhIM2fStMcGT9i2T//tSwYFlcyoRRDcDZ+TYHpH8azBBCyhpSeqw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>

$(function () {
    $("#btnSave").click(function () {
        window.scrollTo(0, 0);
        html2canvas($(".container")[0]).then(function (canvas) {
        $("#img-out").append(canvas);
     
       });
    });
 });
</script>

This is my jsfiddle link: https://jsfiddle.net/shinokada/cxnh81f4/55/