Rainbow Text

Here is a rainbow heading!

Unless you are using IE11.
Then it is black.

Rainbow Text

Something to use for headings perhaps, and not so much for common text. It is done by creating a container with a gradient background, and then adding some text (here H1 and H2 have been used) in black with a white background. The magic happens when you turn on 'blend-mode: screen'.

Instead of a gradient background you can also use an image background.
Unfortunately, IE11 doesn't understand the blend modes and is displaying just the black text.

Placeholder Picture

Download this component