Better gradient scrims

While material design tends to discourage the use of gradient scrims in favor of color blocks and flat color scrims, gradients are sometimes the best available option. When you do use them, make them as subtle as possible by minimizing their total opacity and elongating them to lower their contrast.

Another approach I've been thinking about is using different gradient functions. The attached images show what a cubic gradient extended to twice the length of the linear gradient would look like. The result is a much smoother transition (first image) with an overall similar darkness profile to the linear gradient over the shorter distance (second image).

While custom gradient functions aren't really available in most graphics frameworks, you can approximate them using multi-stop linear gradients. I'll be writing up a sample implementation for Android soon, for use in Muzei. Stay tuned to code.muzei.co if you're interested!

EDIT: Muzei implementation here: https://github.com/romannurik/muzei/blob/master/main/src/main/java/com/google/android/apps/muzei/util/ScrimUtil.java
Photo
Photo
Cubic Gradients
2 Photos - View album
Shared publiclyView activity