Reports

After some more research, I found two solutions to this challenge that work on both Firefox and Chrome.

First one is thanks to Michael Mullany's help:

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap');

body {
  font-family: 'Manrope', sans-serif;
  font-weight: 500;
  font-size: 3em;
  margin: auto;
  margin-top: 50px;
  max-width: 25ch;
}

div {
  filter: url('#gooey-filter');
}

p {
  display: inline;
  padding: 0.5em;
  line-height: 1.3;
  background: #D1FB96;
  border-radius: 30px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

span:focus {
    outline: 0;
}

.bkg-span {
  background-color: #D1FB96;
  border-radius: 30px;
  padding: 0.3em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.txt-span {
  position: relative;
}

<!-- Inspo: https://dribbble.com/shots/20324434-365MAG-Article -->

<div>
<p><span class="bkg-span"><span class="txt-span">I just want to smile and live life and enjoy every moment while I still have it.</span></span></p>
</div>


<svg>
  <defs>
    <filter id="gooey-filter">
      <feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="7.5"/>
      <feColorMatrix in="blur" result="colormatrix"
        type="matrix"
        values="1 0 0 0 0
                0 1 0 0 0
                0 0 1 0 0
                0 0 0 58 -9" />
      <feBlend in="SourceGraphic" in2="colormatrix"/>
    </filter>
  </defs>
</svg>

I also came up with this one, thanks to Codrops:

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap');

body {
  font-family: 'Manrope', sans-serif;
  font-weight: 500;
  font-size: 3em;
  margin: auto;
  margin-top: 50px;
  max-width: 25ch;
}

div {
  filter: url('#goo');
}

p {
  line-height: 1.3;
}

.bkg-span {
  background-color: #D1FB96;
  border-radius: 30px;
  padding: 0.3em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.txt-span {
  position: relative;
}

<!-- Inspo: https://dribbble.com/shots/20324434-365MAG-Article -->

<div>
<p><span class="bkg-span"><span class="txt-span">I just want to smile and live life and enjoy every moment while I still have it.</span></span></p>
</div>


<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="goo">
      <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo" />
      <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
    </filter>
  </defs>
</svg>

79416710