HTML Code

<!DOCTYPE html>



<html lang="en">



<head>



  <meta charset="UTF-8">



  <meta name="viewport" content="width=device-width, initial-scale=1.0">



  <title>CSS mask-origin Comparison</title>



  <style>



    body {



      font-family: system-ui, sans-serif;



      padding: 1.5rem;



      line-height: 1.6;



      background: #f8fafc;



    }







    .demo-wrap {



      display: flex;



      flex-wrap: wrap;



      gap: 1.5rem;



    }







    .mask-box {



      width: 200px;



      height: 140px;



      padding: 16px;



      border: 8px solid #334155;



      background: linear-gradient(135deg, #f97316, #ec4899, #8b5cf6);



      -webkit-mask-image: url('/images/apple.png');



      mask-image: url('/images/apple.png');



      -webkit-mask-size: 56px;



      mask-size: 56px;



      -webkit-mask-repeat: no-repeat;



      mask-repeat: no-repeat;



      -webkit-mask-position: top left;



      mask-position: top left;



    }







    .origin-border {



      -webkit-mask-origin: border-box;



      mask-origin: border-box;



    }







    .origin-padding {



      -webkit-mask-origin: padding-box;



      mask-origin: padding-box;



    }







    .origin-content {



      -webkit-mask-origin: content-box;



      mask-origin: content-box;



    }



  </style>



</head>



<body>



  <h1>Mask Origin Comparison</h1>



  <div class="demo-wrap">



    <div>



      <p><strong>border-box</strong></p>



      <div class="mask-box origin-border"></div>



    </div>



    <div>



      <p><strong>padding-box</strong></p>



      <div class="mask-box origin-padding"></div>



    </div>



    <div>



      <p><strong>content-box</strong></p>



      <div class="mask-box origin-content"></div>



    </div>



  </div>



</body>



</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

CSS mask-origin Property - all three compared