CSS - gradient border not working in safari - html

Question

I am trying to create a custom button with a gradient border. At this point I got the button to work in both Chrome and Firefox.
I have followed an online guide on how to create custom borders with a gradient which are also rounded. The link to the guide can be found here: documentation.
But for some reason the same styling does not work in Safari. I do not know why this is the case.
Here is the CSS code I use in order to create the button. I have also included a snippet with the same style at the bottom. Note that the snippet has a few extra classes and CSS properties just to get it to show properly.
.rainbow-gradient-border {
position: relative;
border-radius: 0.25rem;
box-shadow: 0 2px 10px 0 rgba(142, 57, 255, 0.29);
}
.rainbow-gradient-border::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 0.25rem;
padding: 0.1rem;
background: linear-gradient(
90deg,
#4d3d8f 0%,
#df67ed 23%,
#e24c26 65%,
#f18823 84%,
#3aa6c2 100%
);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: destination-out;
mask-composite: exclude;
}
body, .container{
width: 100%;
height: 100%;
background-color: black;
}
.container{
background-color: black;
}
.rainbow-gradient-border {
position: relative;
color: white;
width: 10rem;
display: flex;
justify-content: center;
align-items: center;
border-radius: 0.25rem;
box-shadow: 0 2px 10px 0 rgba(142, 57, 255, 0.29);
}
.rainbow-gradient-border::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 0.25rem;
padding: 0.1rem;
background: linear-gradient(
90deg,
#4d3d8f 0%,
#df67ed 23%,
#e24c26 65%,
#f18823 84%,
#3aa6c2 100%
);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: destination-out;
mask-composite: exclude;
}
<div class="container">
<div class="rainbow-gradient-border">
<p>Log In</p>
</div>
</div>

Answer 1

try using -webkit-mask-composite: source-out;
instead of destination-out.
This worked for me and they have the same description on https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-mask-composite

Answer 2

You can achieve this in a more simple way, without using masks. I used this tool to add the prefixes.
body, .container{
width: 100%;
height: 100%;
background-color: black;
color: white;
}
.rainbow-gradient-border {
position: relative;
}
.outie{
display: inline-block;
background: -webkit-gradient(
linear,
left top, right top,
from(#4d3d8f),
color-stop(23%, #df67ed),
color-stop(65%, #e24c26),
color-stop(84%, #f18823),
to(#3aa6c2)
);
background: -o-linear-gradient(
left,
#4d3d8f 0%,
#df67ed 23%,
#e24c26 65%,
#f18823 84%,
#3aa6c2 100%
);
background: linear-gradient(
90deg,
#4d3d8f 0%,
#df67ed 23%,
#e24c26 65%,
#f18823 84%,
#3aa6c2 100%
);
border-radius: 4px;
padding: 2px;
width: 10rem;
border-radius: 0.25rem;
-webkit-box-shadow: 0 2px 10px 0 rgba(142, 57, 255, 0.29);
box-shadow: 0 2px 10px 0 rgba(142, 57, 255, 0.29);
}
.innie{
display:inline-block;
width: 100%;
background: black;
padding: 15px 0px;
text-align: center;
}
<div class="container">
<div class="rainbow-gradient-border">
<span class="outie">
<span class="innie">
Log In
</span>
</span>
</div>
</div>