CSS gradiant border bottom

Issue

I am stuck with something. Using Bootstrap 5 navbar, I try to make a simple a simple 40px hight vertical border bottom, going from color #e5e5e5 to color #fefefe Here is the sample image:

Thank you if you have a final idea because I am fighting with that without any success :(

Thank you very much.

Solution

Use border-image

.box {
  height: 150px;
  background: lightblue;
  border-image: 
    linear-gradient(#e5e5e5,#fefefe) 0 0 100% 0/
    0 0 40px 0/0 0 40px 0; /* adjust both 40px to control the size */
}

<div class="box"></div>

Answered By - Temani Afif