How do I make Google Chrome not crop off the bottom of a CSS drop-shadow effect when using a CSS mask?
15:47 04 Nov 2025

I want to put a horizontal line with a glowy effect beneath the headings on a webpage, where both the line and the glow fade out at the left and right ends. I've got it working almost exactly the way I want in Firefox, but in Google Chrome the bottom of the glow gets cropped off.

Specifically, in Chrome it always looks as if the no-clip property is not set (or at least, removing that property makes Firefox crop off the bottom the same way Chrome does).

Does anyone know how to fix this?

Here's a runnable code snippet:

html {
    background: black;
    font-size: 16px;
    margin: 0;
}
.first-heading {
    margin: 0.9375rem 3.5rem;
    font-family: serif;
    font-weight: 400;
    font-style: normal;
    color: #bdbdbd;
}
.page-heading {
    width: 100%;
    display: inline-flex;
    position: relative;
}
.page-heading::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    border-bottom: 0.125rem solid gold;
    filter: drop-shadow(0 0 0.5rem gold) drop-shadow(0 0 0.5rem gold);
    mask: linear-gradient(0.25turn, black 0%, white 6.25%, white 93.75%, black 100%) luminance no-clip;
}

    
Heading

css google-chrome mask