'How to use linear gradient in box-shadow property of css?

I want to change the color of my range track slider in gradient colors, but unable to do that in box-shadow property. Below is the code snippet :

.range .field input::-webkit-slider-thumb{
  -webkit-appearance: none;
  height: 12px;
  width: 12px;
  background:   #ffa399;
  border-radius: 50%;
  border: 1px solid #fe6d73;
  cursor: pointer;
  box-shadow: -302px 0 0 300px #00fd0a;
}

Here's my codepen link - https://codepen.io/MadanSinha/pen/ExobgXe

i.e. I want to change my range slider track from image 1 to image 2. enter image description here

enter image description here

htmlcssrangecss-gradients


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions