I was polishing the hero section of a client's custom theme, and there was one big headline with gradient text. The technique is the classic one: put a gradient background on a span, then clip that gradient to the letterforms with background-clip: text and make the text color transparent. On most words it looked perfect. But the moment the headline happened to contain a word with descenders — something like "engaging", "typography", or "happy" — the tails of g, p, q, and y were sliced clean off at the bottom. Not blurred, not covered by another element — genuinely cropped, as if an invisible blade was sitting right on the baseline.
Here is the trigger code, exactly as I first wrote it:
.accent {
background: linear-gradient(90deg, #f0f0f0, #8a8a8a);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
line-height: 1;
}<h1>Building <span class="accent">engaging typography</span></h1>I rendered it, and the tails of "g" and "y" in "engaging" and "typography" were half gone. My first instinct was a font problem — I swapped fonts, changed font-size, even started suspecting antialiasing. All dead ends. But when I reverted the color to solid (dropped color: transparent), the letters came back whole. So the problem clearly lived in the clipping mechanism, not in the font or the size.
Why this happens
The core issue: background-clip: text clips the background image (the gradient) to the glyph shapes, but the area that actually gets painted and clipped follows the text's line box, not the true outline of each letter. The height of that line box is driven by line-height. I had set line-height: 1, which means the line is tight against the font's size with almost no extra room above or below.
The trouble is that descenders — the tails of g, p, q, y — drop below the baseline. With the line-height that tight and zero bottom padding, the bottom of those glyphs falls outside the painted and clipped area. Once it leaves the clip box, the tail simply isn't painted — it gets cropped. Letters without descenders ("i", "n", "a") are fine, which is exactly why the bug felt intermittent and made me doubt for a moment that it was even a bug. But it's perfectly consistent: whenever there's a descender and not enough room below it, the tail gets sacrificed.
So this isn't a font bug and it isn't a browser bug. It's the expected behavior of a clip bounded by the line box — it just so happens that line-height: 1 makes that boundary tight enough to push the descenders outside it.
The fix
The key is to give the clip box some breathing room below the baseline. The way to do that: turn the accent span into an inline-block so it can take vertical padding properly, add a small padding-bottom, and bump line-height slightly so there's space under the baseline. Here is the corrected version:
.accent {
background: linear-gradient(90deg, #f0f0f0, #8a8a8a);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
display: inline-block;
padding-bottom: 0.12em;
line-height: 1.15;
}padding-bottom: 0.12em gives the glyphs a little room below them, so the clip box stretches downward and covers the very end of the descenders. Using em keeps the padding scaled to the font size, so it stays proportional whether the headline is big or small. The line-height: 1.15 adds a touch more vertical slack. If a tail still gets nicked on a particular font, nudge the padding up a bit — say 0.15em or 0.2em.
One thing to watch: display: inline-block changes how the span flows and aligns with the surrounding text. An inline-block span won't wrap line by line the way normal inline text does — it becomes one solid block that can jump to a new line as a unit. For that reason, apply this to the inline accent span inside the sentence, not to the whole headline block. And after you apply it, check the wrapping: if the accent is long and has to break across multiple lines, inline-block can lay it out differently than you expect. For one or two accent words, it's safe.
After this change, the tails of g, p, q, and y in my headline render in full, the gradient stays smooth from left to right, and there are no side effects on the surrounding non-accent text.
The takeaway
Clipped text needs breathing room below the baseline. The moment you lean on background-clip: text with color: transparent, the clip box is tied to the line box — and a line box that's too tight will crop anything that drops below the baseline, descender tails included. The fix is simple: give the clip box padding-bottom (via inline-block) plus a little line-height, so the descenders have somewhere to be painted. Next time you see letter tails clipped in gradient text, don't reach for the font or the browser first — check how tight that line box is.