linear-gradient custom underline to a text with line break

user_8141222 0
Viewed 258

I have linear gradient text. What I'm trying to achieve is to have text-underline with same colors like text:

enter image description here

What I have already tried:

  • Default text-decoration: underline gives me non gradiented line which is way to big, and I can't actually customize it at all.
  • ::after pseudoclass gives me underline but it's under whole text block
  • box shadow is affected by line-height, and I can't get this line closer to text.

body {
  background: black;
}
h1 {
  font-size: 120px;
  display: inline;
  line-height: 130px;
  position: relative;
  text-decoration: underline;
  background: linear-gradient(330deg, #ff6553 0, #ff1979 50%, #ffa400 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

h1::after {
  position: absolute;
  display: inline;
  content: "";
  width: 100%;
  height: 2px;
  background: white;
  bottom: 0;
  left: 0;
}
<div class="text">
  <h1>some text with <br> colorful gradient</h1>
</div>

Here's my code fiddle:

https://jsfiddle.net/3z0qrs6k/

css html javascript
1 Answers

Multiple gradient can do it:

body {
  background: black;
}
h1 span {
  font-size: 120px;
  line-height: 130px;
  color:transparent;
  --g:linear-gradient(330deg, #ff6553, #ff1979, #ffa400);
  background: 
    var(--g),
    var(--g)  bottom 2px left 0/100% 2px no-repeat; /* adjust the bottom value to control the offset */
  background-clip: text,padding-box;
  -webkit-background-clip: text,padding-box;
}
<h1><span>some text with <br> colorful gradient</span></h1>

user_86203330
Related