I'm Rich Court,
Web Developer

In terms of markup, this is just one div, with some text in it. Using CSS, I apply three background-colors, each a different gradient (one radial and two linear, all with loads of colour stops). I then animate each of those backgrounds to achieve the cloudiness effect. Then I use '-webkit-background-clip: text;' (experimental, hence the prefix), which makes the div only visible where the text is. Finally, so that the background can show through the text, I use 'color: transparent;'. I'm pretty happy with the effect - it'd probably look good on a portfolio homepage or somewhere like that.

Feel free to inspect and take a look at the CSS. You could use an SVG and 'clip-path' if you wanted to use an image instead of text.

Tested in Chrome, Firefox, Edge and Opera, '-webkit-background-clip' isn't supported at all in IE.