50 in 50: Day 9

Today’s design shows you how to do one of the more advanced techniques: how to mask anything to text!

Here we have an example where a gradient is being masked to text, but this would work for images, colors, or other elements.

The steps are:

1. Make your text, styled with the font you want

2. Add an overlay to the text, place the elements you want to clip in the overlay

3. Add a mask to original text, duplicate the original text and font into the mask

It’s important that in step 1 and 3 the text and font are identical. In step 1, the original text element sets the initial size for the overlay and mask. In step 3, the text in the mask, which perfectly matches the size of step 1, is what provides the cutting-out part of the mask and fits perfectly because it is the same text and font.

If you have any questions, reach out to us on Twitter or Discord anytime!