CSS mask/-webkit-mask not working in safari

Question

I have a project where I try to draw a circle with a gradient border. I have made it so it works in Chrome. But the styling doesn't work in safari. I don't know why it wouldn't work. I have added a mask: version for safari.

.gradient-circle {
  height: 10rem;
  width: 10rem;

  --b: 5px;
  /* border width*/
  display: inline-block;
  margin: 10px;
  z-index: 0;
  position:relative;
}

.gradient-circle:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--c, linear-gradient(to top, #5454d4, rgba(249, 116, 104)));
  mask: linear-gradient(0deg, #fff, transparent 96%), radial-gradient( farthest-side, transparent calc(100% - var(--b) - 1px), #fff calc(100% - var(--b))) content-box;
  -webkit-mask: linear-gradient(0deg, #fff, transparent 96%), radial-gradient( farthest-side, transparent calc(100% - var(--b) - 1px), #fff calc(100% - var(--b))) content-box;
  mask-composite: intersect;
  -webkit-mask-composite: destination-in;
  border-radius: 50%;
  padding: 1px;
}

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

score 3 · Accepted Answer · answered Feb 01 '21 at 12:05

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>

CSS mask/-webkit-mask not working in safari

1 Answers1