Back to Community
50 in 50: Day 9
15

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!

This is a free SwiftUI design you can download and open on DetailsPro. To start, download DetailsPro and navigate to the Explore section.
Get DetailsPro on the App Store
MORE BY DETAILSPRO
DetailsPro
© Fun Focus Software LLC
SwiftUI is a trademark of Apple Inc., registered in the U.S. and other countries.