Gradient fade for expandable text
How to use it
Overlay text with a gradient that moves from fully transparent at the top to whatever the background colour is at the bottom.
When to use it
If text inside a container of some kind is expandable, so that the user can reveal more text, it's important to make it clear that this is possible. Otherwise the user might assume that there's no more text to read. One way to make this more obvious is to apply a gradient to the bottom of the text, so that it fades away. This gives the impression that there's more of it.
What to watch out for
If you're not working with much text, applying a gradient fade might not be a good idea, since there won't be much text to go by for your user to decide if they want to expand the content.