HTML制作渐变下划线

想做一个渐变下划线
代码部分
            h1{
                padding-bottom: 0px;
                border-bottom: 20px solid;
                width: 157px;
                border-image: -webkit-linear-gradient(to bottom,black , rgba(214, 211, 211, 0.53) , #ffffff)
            }
想做成这种效果

img

border-image: linear-gradient()了解一下


h1{
border-bottom: 20px solid;
border-image: linear-gradient(to bottom, #000 99%, #fff,#c1c1c1) 1;
}

background-image: linear-gradient(）
了解一哈
在父节点下绝对定位一个div，然后用渐变属性就行，easy。
https://www.runoob.com/css3/css3-gradients.html
有帮助的话采纳一下哦！