I am looking for a way to underline heading that has more than one line, gradient background [EDIT - background image that is not solid color, but gradient], ignore descenders (so border-bottom is not a solution) and that it will look good in Chrome (simple text-decoration: underline is very thick in Chrome).
I have checked all solutions mentioned here: https://css-tricks.com/styling-underlines-web/ but nothing there solving my problem (exept "avoid using an underline altogether" :)).
And as far as I now, Chrom still doesn't support text-decoration-thickness
The requirement to ignore descenders means that one is more-or-less forced to use CSS text decoration because who else knows where there are descenders? The alternative might be to have span around every character with different formatting, not really practical.
It transpires that Chrome will support text-decoration-thickness but only with certain conditions. From https://caniuse.com/?search=text-decoration-thickness:
The text-decoration-thickness property does not work unless either text-underline-offset is set to something other than auto or text-decoration-color is set to something other than currentColor. See Chromium bug 1154537
It is therefore possible to control the underline thickness. It is more problematic trying to get the Chrome and Firefox implementations look exactly the same from the point of view of offset (FF seems to place underline by default further down than Chrome) and the two browsers do not treat descenders exactly the same way. Hopefully setting the thickness and tweaking the offset will result in an acceptable heading.
Here's an example
div {
font-family: Arial, Helvetica, sans-serif;
font-weight; 400;
font-size: 3em;
width: 300px;
text-align: center;
text-decoration: underline;
text-decoration-thickness: 2px;
text-decoration-color: black;
text-underline-offset: 0.1em;
}<div>To jest kryzys ekologiczny i klimatyczny</div>