Apply smooth gradient color for list

user_6725091 0
Viewed 57

I want to apply gradient color for item in the menu on hover and when link is active:

    <li class="nav-find-item active">
      <a class="nav-find-link " href="#!dashboard">
        <i class="fa fa-tachometer menu-icon"></i> 
        <span class="menu-title"> Dashboard</span>
      </a>
    </li>

here is my css style: 

.sidebar-find .nav-find .nav-find-item.active {
  background-image: linear-gradient(to right, #FFB88C, #191F28 10%);
}

.sidebar-find .nav-find .nav-find-item:hover {
  background-image: linear-gradient(to right, #FFB88C, #191F28 10%);
}

Here is fiddle

But it doesnt get me the desired result. What I want: enter image description here

And what i get: enter image description here

I dont need the icon, just the color.

css html
2 Answers

try this:

background: -moz-linear-gradient(left, rgba(255,184,140,0.38) 0%, rgba(25,31,40,0) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(255,184,140,0.38)), color-stop(100%, rgba(25,31,40,0)));
background: -webkit-linear-gradient(left, rgba(255,184,140,0.38) 0%, rgba(25,31,40,0) 100%);
background: -o-linear-gradient(left, rgba(255,184,140,0.38) 0%, rgba(25,31,40,0) 100%);
background: -ms-linear-gradient(left, rgba(255,184,140,0.38) 0%, rgba(25,31,40,0) 100%);
background: linear-gradient(to right, rgba(255,184,140,0.38) 0%, rgba(25,31,40,0) 100%);

Or play around with the settings here

user_24956190

You can also add a value to the first value, play around till you get the desired effect, something like this looks ok to me: 

background-image: linear-gradient(to right, #FFB88C -30%, #191F28 10%);
user_47331610
Related