[SOLVED] background-image-source not working with linear-gradient as per Figma

background-image-source not working with linear-gradient as per Figma

I'm trying to implement a nice linear-gradient border on a container. However, it's not playing ball and the border is just appearing in the bottom left, top left, top right, bottom right in a little square. Not actually appearing around the entire border.

Below is the css code:

.blur > .elementor-column-wrap {
    background-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    border: 1px solid;
    border-image-source: linear-gradient(
        310.55deg, 
        rgba(255, 255, 255, 0) 29.24%,
        rgba(255, 255, 255, 0.6) 97.14%
    );
}

@supports ( backdrop-filter: blur(5px) ) or ( -webkit-backdrop-filter: blur(5px) )  {
    .blur > .elementor-column-wrap {
        -webkit-backdrop-filter: blur(5px);
        backdrop-filter: blur(5px);
    }
}

@supports not ( backdrop-filter: blur(5px) ) and ( -webkit-backdrop-filter: blur(5px) ) {
    .blur > .elementor-column-wrap {
        background-color: rgba(255, 255, 255, 0.82);
    }
}

Any idea why this isn't working please let us know, the border code was also taken straight from Figma as the 'recommended' code to use but evidently it's got some issues with use case.

Image below of the displayed border currently:

Solution

You need to define border-image-slice

.box {
   width:200px;
   height:200px;
   background-color: rgba(255, 255, 255, 0.12);
   box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
   border: 10px solid;
   border-image-source: linear-gradient(
        310.55deg, 
        rgba(255, 255, 255, 0) 29.24%,
        rgba(255, 255, 255, 0.6) 97.14%
    );
   border-image-slice: 10;
}


body {
 background:pink;
}

<div class="box">

</div>