Set shadow to create gradient effect

Question

I have a list ul / li and want to set shadow to create a gradient effect when li have active and with Hover.

This is the code that creates the border, the idea is to insert more 5px as shadow to create the effect.

ul.navmenu-nav>li>a:hover,
ul.navmenu-nav>li.active>a,
ul.navmenu-nav>li>a:focus {
   padding-left:15px;
   border-left: 5px solid #2E2F44;
   text-decoration: none;
   background-color: #ffffff;
}

Answer 1

If I understand well with linear-gradient you can do this effect.

I made the degrade effect with 10px width, but you can control this size at the start and end values of the gradient, leave a comment in the code, in it your color starts at 0px and goes through the gradient up to 10px.

ul.navmenu-nav>li>a:hover,
ul.navmenu-nav>li.active>a,
ul.navmenu-nav>li>a:focus {
   padding-left:15px;
   border-left: 5px solid #2E2F44;
   text-decoration: none;
   background-color: #ffffff;
   background-image: linear-gradient(to right, #2E2F44 0px, transparent 10px, transparent 10px); /* o gradiente começa no 0px e vai até o 10px começa na sua cor e termina transparente */
}
ul li {
  list-style: none;
}

<ul class="navmenu-nav">
    <li class="active">
        <a href="">Item 1</a>
    </li>
    <li>
        <a href="">Item 2</a>
    </li>
    <li>
        <a href="">Item 3</a>
    </li>
</ul>