Email or username:

Password:

Forgot your password?
Top-level
Lickability

We’re showing this in Figma, but this can be easily done wherever you’re building UI.

The view is made up of two layers: the image and the text layer. Both layers are the same size.

A photo of autumn foliage in a box labeled “Image”. On top of it, a box labeled “Text” contains the headline “Connecticut Autumn” and sub headline “How to emotionally prepare yourself”. The text box background is mostly transparent, except for a slight black-to-transparent gradient.
4 comments
Lickability

The text layer gets a legibility scrim (linear gradient) for the background with these stops:

0.0: Transparent
0.6: Transparent
1.0: Off-black color at 80% opacity

Why off-black? lickability.com/blog/plussing-

The text layer’s linear gradient background with markers for the gradient stops shown on top. A fully transparent stop at 0%, a fully transparent stop at around 60%, and a mostly opaque at 100%
Lickability

Lastly, a text shadow for a final layer of defending your design against poor contrast. We use the same color as the legibility scrim for the shadow. You want the shadow to be sharp enough so it remains close to the letter shape, but not so sharp that it looks embossed.

The labels highlighted in Figma with the drop shadow inspector open next to it with these parameters: Shadow x position: 0. Y position: 1. Blur: 2. Spread: 0. Color: Off-black (#131727) at 25% opacity.
Lickability

That’s it! Just a little finessing can make your design easier to read on any arbitrary background. ✨

The final design framed in a carousel in an iOS app.
BG!

@lickability really love these threads! Thanks for taking the time. I feel the threaded posts are a great way to digest the info you’re sharing. Thank you!

Go Up