Email or username:

Password:

Forgot your password?
Lickability's posts Post Back to profile
Top-level
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%
12 Mar 2024 at 15:49 | Open on mastodon.social
3 comments
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.
12 Mar 2024 at 15:50 | Open on mastodon.social
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.
12 Mar 2024 at 15:50 | Open on mastodon.social
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!

12 Mar 2024 at 15:53 | Open on snailedit.social
Go Up