На чистом CSS, без использования изображений в качестве фона для символов, такое сделать затруднительно. А вот SVG довольно неплохо справляется с задачей.
Запустите пример, подвигайте ползунки. Как только добьётесь нужного результата, скопируйте код фильтра из нижнего поля.
.splash {
font: bold 100px "Arial Black";
/* background: linear-gradient(35deg, #f00, #f00); */
filter: url(#splash) drop-shadow(0 0 1px #f00);
-webkit-background-clip: text;
-webkit-text-fill-color: #fff;
/* -webkit-text-stroke: 1px #f00; */
/* text-shadow: 0 0 1px #f00; */
}
<div class="splash">SPLASH</div>
<svg width="0" height="0" xmlns="http://www.w3.org/2000/svg">
<filter id="splash">
<feTurbulence type="turbulence" baseFrequency="0.25" numOctaves="13" result="turbulence"/>
<feDisplacementMap in="SourceGraphic" in2="turbulence" scale="26" xChannelSelector="R" yChannelSelector="G"/>
</filter>
</svg>
<!-- Only for demo --> <br>baseFrequency <input type="range" min="0.01" max="1.0" step="0.01" value="0.25" oninput="document.getElementById('splash').children[0].setAttribute('baseFrequency', this.value);document.getElementById('code').value = document.querySelector('svg').outerHTML;"> scale <input type="range" min="1" max="100" step="1" value="26" oninput="document.getElementById('splash').children[1].setAttribute('scale', this.value);document.getElementById('code').value = document.querySelector('svg').outerHTML;"> Код: <input id="code" onfocus="this.select()">
Возможно, что какие-нибудь из закомментированных CSS-свойств (или их комбинации) подойдут лучше.