A Scrim explained

A scrim is a black to transparent gradient on top of an image and below a title (using that good old z-index). The concept is to make text legible no matter the image and you’ve no doubt seen it here and there (xbox dashboard for example.) One design philosophy that encourages this is Material Design by google.

It’s a brilliant solution to a problem and Google even includes specific rates to make the gradient ‘flow’ nicely and not look terrible.

It may be a little thing but its so simple and functional that I just love it! There is one big issue I do have with their follow up instruction however…

Google are brilliant at design, but my issue is their importance of the image over accessibility. The legibility of the text on the left is difficult and certainly doesn’t adhere to the WCAG 2.0 color standards.

So my little additional advice to Google’s instructions is ignore the rule above and make sure the text is legible rather than the ‘impact’ of the image (so rockstar right?)

Now whilst the rate of the gradient and stop gaps are specified there’s no CSS or anything presented, alas we’ve made some!

The Scrim SCSS mixin


@mixin scrimGradient($startColor: $color-black, $direction: 'to bottom') {

$scrimCoordinates: (
0: 1,
19: 0.738,
34: 0.541,
47: 0.382,
56.5: 0.278,
65: 0.194,
73: 0.126,
80.2: 0.075,
86.1: 0.042,
91: 0.021,
95.2: 0.008,
98.2: 0.002,
100: 0
);

You can also see the code above in use (the middle one) right here (feel free to fork it):

See the Pen Scrim Example by Martin Whitaker (@sirnightowl) on CodePen.13366