CSS Mask Not Working on Chrome (Webkit)

Chrome not rendering CSS mask-image consistently

Chrome’s implementation of CSS masks is still incomplete. At this stage, it does not support the luminance mode:

The default mode is alpha. Since your cat image has a transparent background, this works fine. Your heart image on the other hand, does not.

The demo below starts with your cat image, then transitions to your original heart before finishing on the same heart but with transparency applied.

To avoid the painful data URLs, I added imgur links for the images.

Cat: https://i.stack.imgur.com/rnXYp.png

Old Heart: https://i.stack.imgur.com/nbLhD.png

New Heart: https://i.stack.imgur.com/JnFrp.png

let heartUri = 'url(\'https://i.stack.imgur.com/nbLhD.png\')';let newHeartUri = 'url(\'https://i.stack.imgur.com/JnFrp.png\')'
 setTimeout(() => {     document.getElementById('luminance-target').style['-webkit-mask-image'] = heartUri; }, 3000);
 setTimeout(() => {     document.getElementById('luminance-target').style['-webkit-mask-image'] = newHeartUri; }, 6000); 

#luminance-target {  display: block;  background-color: yellow;  -webkit-mask-image: url('https://i.stack.imgur.com/rnXYp.png');  -webkit-mask-mode: alpha;  -webkit-mask-repeat: no-repeat;  -webkit-mask-size: 100%;  width: 300px;  height: 300px;}

<div id="luminance-target">    <h2>Luminance Mask</h2></div>

CSS mask/-webkit-mask not working in safari

Here is a different idea without mask-composite which is the culprit I guess. Simply consider an extra layer to be able to apply both mask independently

.gradient-circle {
  height: 10rem;
  width: 10rem;
  --b: 5px; /* border width*/
  display: inline-block;
  margin: 10px;
  z-index: 0;
  position: relative;
}

.gradient-circle div,
.gradient-circle div:before {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.gradient-circle div {
  -webkit-mask: linear-gradient(0deg, #fff, transparent 96%);
}

.gradient-circle div:before {
  content: "";
  background: var(--c, linear-gradient(to top, #5454d4, rgba(249, 116, 104)));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--b) - 1px), #fff calc(100% - var(--b))) content-box;
  border-radius: 50%;
  padding: 1px;
}

<span class="gradient-circle">
  <div></div>
</span>

Related Topics