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?
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.