Gradient color in other elements than text - css

Question

On my homepage (https://howtogetrippedathome.com/), I want to give all the (now) red elements a gradient color.
I managed to give the menu items, the service titles and service icons gradient colors using the following CSS:
.service-icon.wow.zoomInDown {
background: linear-gradient(to bottom right, #ff2828 , #F27B26) !important;
}
.service-title {
background: -webkit-linear-gradient(bottom left, #ff2828 , #F27B26);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
However, I was not able to make the text-decoration (double underscore) of the widget titles, the read my story/see all blogs buttons and the social icons (Facebook and Instagram) this gradient. Using 'linear-gradient' after 'color:' does not work unfortunately.
Is this doable, or am I asking for something impossible? I'm curious what you guys have to say.
Best,
Maarten

Answer 1

The closest I got to it for the double underline was this (see https://howtogetrippedathome.com/):
.widget-title:after {
background-image: -webkit-linear-gradient(left, #ff2828 , #F27B26);;
padding: 1px;
border-bottom: 6px double #fff !important;
}
However, this has the effect that there still is a white double border visible in the about section. Setting the color of the border to transparent results in both the border and the padding having the gradient color, so they form one rectangular shape.
Another way it could be done is using:
-webkit-border-image: -webkit-gradient(...)
But I can't make it work.
Any ideas?

Answer 2

For gradient text you can do something like this:
background: -webkit-linear-gradient(#eee, #333);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
Source: https://css-tricks.com/snippets/css/gradient-text/
For the double underline the best option you have is to use <hr> and set a gradient background.
There is a text-decoration-color style, but it doesn't accept gradients.