Squared gradient border can be achieved with border-image.
To make it rounded we have to use several tricks with CSS masks:
.card {
border-radius: var(--br);
position: relative;
background: hsl(from var(--bg-dark) h s l / 0.1);
backdrop-filter: blur(10px);
&::before {
content: '';
position: absolute;
z-index: -1;
inset: 0;
border-radius: inherit;
border: 1px solid transparent;
background: linear-gradient(
var(--bg-light),
hsl(from var(--bg-dark) h s l / 0.1)
) border-box;
mask: linear-gradient(black, black) border-box, linear-gradient(black, black) padding-box;
mask-composite: subtract;
}
}
Top comments (0)