CSS Background Image Linear Gradient showing unwanted border in Chrome

Question

I'm using a background image with linear gradient to create a highlight text effect but it's causing an unwanted bottom border:

.fancy-underline {
    text-decoration: none;
    background-image: -webkit-gradient(linear,left top, left bottom,from(rgba(255,255,255,.7)),to(rgba(255,255,255,.7))),-webkit-gradient(linear,left top, left bottom,from(#91c678),to(#91c678));
    background-image: linear-gradient(rgba(255,255,255,.7),rgba(255,255,255,.7)),linear-gradient(#91c678,#91c678);
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 100% 50%;
}

<p><span class="fancy-underline">here is some fancy underline</span></p>

I can't see anything under the computed styles in the debugger that might cause this so I'm thinking it must be an issue with my linear gradient. Can anyone point me in the right direction?

Looks like a rendering bug to me. Sadly just a hack, but try background-position: 0 101%; — RNH, Mar 09 '20 at 09:46

Temani Afif · Accepted Answer · 2020-03-09T10:26:37.993

You can cover more area like below. You make the gradient big enough and you shift it to uncover the top 50% and you will have the same result as you did

.fancy-underline {
    text-decoration: none;
    background-image: linear-gradient(rgba(255,255,255,.7),rgba(255,255,255,.7)),linear-gradient(#91c678,#91c678);
    background-position: 0 -50%;
    background-repeat: no-repeat;
    background-size: 100% 200%;
}

<p><span class="fancy-underline">here is some fancy underline</span></p>

Related question to understand how it works: Using percentage values with background-position on a linear-gradient

A zoomed version to better see:

.fancy-underline {
  text-decoration: none;
  font-size:100px;
  background-image: linear-gradient(rgba(255, 255, 255, .7), rgba(255, 255, 255, .7)), linear-gradient(#91c678, #91c678);
}
.new {
  background-position: 0 -50%;
  background-size: 100% 200%;
  background-repeat:no-repeat
}

.old {
  background-position: 0 100%;
  background-size: 100% 50%;
  background-repeat:no-repeat
}

<span class="fancy-underline new">new</span>
<span class="fancy-underline old">old</span>

CSS Background Image Linear Gradient showing unwanted border in Chrome

1 Answers1