Real-world Background Clip Text

Whilst recently browsing Dribbble, I came across a great shot by the Balkan Brothers of a new pricing page for a website redesign.

Their use of gradient coloured text for the prices really jumped out at me. It made me wonder, what would be the best way to convert this into HTML + CSS?

Enter background-clip: text. A property that allows you to clip the background properties of an element onto it's text. Using this along with a technique by Divya Manian you can create a working version of this which looks stunning where it's supported and has a sensible fallback.

See the Pen KpdYya by Sam Fleming (@SamFleming) on CodePen.