CSS: how to have transparent background with the blend mode only affecting/being clipped to the (text) content?

Question

Here is the code I have. I think it's fairly obvious what I am trying to achieve - I want to remove the black background behind the text, however, when I simply remove the black background css, the gradient layer just shows, since it's not clipped to the text.

 body { margin: 0; height: 100vh; display: flex; align-items: center; justify-content: center; background:url('https://wallpapersite.com/images/pages/pic_w/16658.jpg') no-repeat center center fixed; background-size: cover; } .neon { position: relative; overflow: hidden; filter: brightness(200%); } .text { background-color: black; color: white; font-size: 100px; font-weight: bold; font-family: sans-serif; text-transform: uppercase; position: relative; user-select: none; } .text::before { content: attr(data-text); position: absolute; color: white; filter: blur(0.02em); mix-blend-mode: difference; } .gradient { position: absolute; background: linear-gradient(45deg, #00f7ff, #f545d7, #0085ff, #6945f5, #005aff); top: 0; left: 0; right: 0; bottom: 0; mix-blend-mode: multiply; } .spotlight { position: absolute; top: -100%; left: -100%; right: 0; bottom: 0; background: radial-gradient( circle, white, transparent 25% ) center / 25% 25%, radial-gradient( circle, white, black 25% ) center / 12.5% 12.5%; animation: light 5s linear infinite; mix-blend-mode: color-dodge; } @keyframes light { to { transform: translate(50%, 50%); } }

 <div class="neon"> <span class="text" data-text="NIGHT SKY">NIGHT SKY</span> <span class="gradient"></span> <span class="spotlight"></span> </div>

Anyway, I have tried a few things like messing around with some of the mix-blend-modes , adding some clipping paths etc, but couldn't get anything close to working. I think it should (?) be possible, but if it isn't, I will try some other methods tomorrow (like converting the text to a png and using the background-clip property)

Answer 1

Another mix-blend-mode will fix it. Use lighten in this case to remove the black part you don't want:

 html { background:#fff; /* this is needed to make sure the blending works fine (any color will do the trick) */ } body { margin: 0; height: 100vh; display: flex; align-items: center; justify-content: center; background: url('https://wallpapersite.com/images/pages/pic_w/16658.jpg') no-repeat center center fixed; background-size: cover; } .neon { position: relative; overflow: hidden; filter: brightness(200%); mix-blend-mode:lighten; /* here */ } .text { background-color: black; color: white; font-size: 100px; font-weight: bold; font-family: sans-serif; text-transform: uppercase; position: relative; user-select: none; } .text::before { content: attr(data-text); position: absolute; color: white; filter: blur(0.02em); mix-blend-mode: difference; } .gradient { position: absolute; background: linear-gradient(45deg, #00f7ff, #f545d7, #0085ff, #6945f5, #005aff); top: 0; left: 0; right: 0; bottom: 0; mix-blend-mode: multiply; } .spotlight { position: absolute; top: -100%; left: -100%; right: 0; bottom: 0; background: radial-gradient( circle, white, transparent 25%) center / 25% 25%, radial-gradient( circle, white, black 25%) center / 12.5% 12.5%; animation: light 5s linear infinite; mix-blend-mode: color-dodge; } @keyframes light { to { transform: translate(50%, 50%); } }

 <div class="neon"> <span class="text" data-text="NIGHT SKY">NIGHT SKY</span> <span class="gradient"></span> <span class="spotlight"></span> </div>