-1

I have the following example :

HTML

<div class="progress">
    <div class="border-right"></div>
    <div class="bar-base"></div>
</div>

CSS

$height: 28px;
$padding-top: 2px;
$padding-left: 10px;

.progress {
  position: relative;
  display: block;
  height: $height;
}
  .border-right {
    position: absolute;
    right: 0px;
    left: 30px;
    top: 0px;
    height: $height;
  }
  
  .bar-base {
    position: absolute;
    top: $padding-top;
    bottom: $padding-top;
    left: $padding-left;
    right: $padding-left;
    height: ($height - $padding-top*5);
    border-radius:10px;     
    box-shadow: 
        0 0 0 1px blue,
        0 0 0 2px blue,
        0 0 0 3px blue,
        0 0 0 4px blue,
        0 0 0 5px #FFFFFF40;
    background: linear-gradient(to right,#BF0882  10%, white 80%);
    width: 200px;
    height: 20px;
  }

https://jsfiddle.net/zlobul/yrm7fLzs/20/

I don't understand why the fade out is working on the div element and not on the shadow box ( blue border) ?

How can I fade out the shadow box too ( blue border from left ( blue ) to the right ( white ) ?

zlobul
  • 335
  • 1
  • 5
  • 20

1 Answers1

1

Edit

Glad you could clarify your question. To achieve that you can use techniques listed in this stackoverflow question or in the css-tricks website.

.progress {
  position: relative;
  display: block;
  height: 28px;
}

.border-right {
  position: absolute;
  right: 0px;
  left: 30px;
  top: 0px;
  height: 28px;
}

.bar-base {
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 10px;
  right: 10px;
  height: 18px;
  border-radius: 10px;
  background: linear-gradient(to right, #BF0882 10%, white 80%);
  width: 200px;
  height: 20px;
}

.bar-base::before {
  content: '';
  position: absolute;
  inset: -10px; /* this is important */
  z-index: -1;
  border-radius: 17px;
  background: linear-gradient(to right, blue 10%, white 90%);
}
<div class="progress">
  <div class="border-right"></div>
  <div class="bar-base"></div>
</div>

Old answer

If by "fade" you mean the multiple box-shadows in the .bar-base then the code is working correctly. You just can't see it well.

The last shadow in box-shadow has the spread only 1px longer than the others, it's just too hard to see it, also, it is white.

Here's the result if you increase it to 10px and make it blue.

.progress {
  position: relative;
  display: block;
  height: 28px;
}
  .border-right {
    position: absolute;
    right: 0px;
    left: 30px;
    top: 0px;
    height: 28px;
  }
  
  .bar-base {
    position: absolute;
    top: 2px;
    bottom: 2px;
    left: 10px;
    right: 10px;
    height: 18px;
    border-radius:10px;     
    box-shadow: 
        0 0 0 1px blue,
        0 0 0 2px blue,
        0 0 0 3px blue,
        0 0 0 4px blue,
        0 0 0 10px rgba(0, 0, 255, .5);
    background: linear-gradient(to right,#BF0882  10%, white 80%);
    width: 200px;
    height: 20px;
  }
<div class="progress">
    <div class="border-right"></div>
    <div class="bar-base"></div>
</div>

Converted computed SCSS to CSS.

Gunther
  • 1,297
  • 9
  • 15
  • No , thats not what I want to achieve . I want the blue box shadow ( border ) to fade out from left to the right ( blue --> white ) , like the content ( red ---> white ) . – zlobul Aug 19 '21 at 07:57
  • 1
    @zlobul I've edited the answer, is it what you wanted now? – Gunther Aug 19 '21 at 13:01
  • Yes , that is exactly what I need , thanks , so you are achieving it with an before pseudo element , thanks a lot ! – zlobul Aug 19 '21 at 13:48
  • Unfortunately for some unknown reason this solution doesnt work in my project , whatever I do , I'm unable to fade out that line :( . Anyway I will have to research whats the reason for that , thanks a lot ! – zlobul Aug 19 '21 at 14:43
  • If you put it in a jsfiddle I may be able to point out the problem – Gunther Aug 19 '21 at 16:46
  • Thanks a lot for your help , I had to use the ::after element instead of ::before to make it work . – zlobul Aug 31 '21 at 14:22