I noticed this nice touch for pride week and wanted to see if there was anything special about how it was done by the devs at instagram. Turns out there wasn't anything special but it looks great and is really simple to do so decided to write it up anyway!
The main property required here is background-clip. It allows you to clip (or mask) an element or text to it's background image or colour.
Important - in order to apply it to text it still requires the -webkit prefix for Chrome, Firefox, Safari and Edge. In Safari it can't be applied to the button tag but you could get around this with a span!
The rainbow is just a simple png repeated as a background image on the element with the background size increased.
Finally they've set the color of the text to transparent to allow the rainbow background to be visible. Interestingly they used the -webkit-text-fill-color property to do this as the standard color property doesn't allow for the transparent value. The two properties are essentially the same, but -webkit-text-fill-color will take precedence over color if the two have different values. This is useful as it means it will just gracefully fallback to the default colour of the text if not supported.
Here's a quick codepen of the final effect. Anyone got any other more advanced examples of background-clip?
Top comments (0)