I'm trying to design a website using the Material Design guidelines.

I've a navbar/headerbar with the logo of my website and some icons. The background color is transparent, showing the background image, when the scroll position is on top of the page. When the scroll position is almost 400px, it is dark grey (it fades during the entire 400pxs).

As you can see, the background has some white spikes, so I can't use white icons. But if I use black or dark icons, they are not well visible when the background is dark grey.

What Material Design guidelines say about this kind of problem? I've read I can't use a shadow to make the top of the background darker...

Relevant documentation: http://www.google.com/design/spec/style/imagery.html#imagery-ui-integration

(text protection paragraph)

enter image description here

3 Answers 3


You could make the transparent bar have a background of black but instead have the opacity set to 20%. Then you could use off white icons and text. Try using Ghostwhite or something like that, since white on black is quite harsh.

You can still have the fade until 400px too. But it will be much smoother.

  • I can add a protection scrim but with a maximum opacity of 40% (according to bigG guidelines), the icons must have 80% opacity (again second bigG) and the result would be this one... i.imgur.com/XT0NIij.png I'm not sure them are enough visible
    – Fez Vrasta
    Sep 5, 2014 at 11:06
  • That looks alot better, what about using the purple color for the icons, similar to the background?
    – McIvor
    Sep 5, 2014 at 11:37
  • I need to follow the material design guidelines... icons can be black or white.
    – Fez Vrasta
    Sep 5, 2014 at 13:40
  • Then you will have to rethink your design :)
    – McIvor
    Sep 5, 2014 at 13:58
  • I can't belive material design does not have a solution to use white backgrounds with dark interface, there must be one...
    – Fez Vrasta
    Sep 5, 2014 at 14:09

Could you have the icons fade between the two colors as the background fades? This could be a simple CSS animation class (highly suggested) or anything as complicated as you want.

  • currently this is my solution but it does not feel material design at all..
    – Fez Vrasta
    Aug 31, 2014 at 5:17

This is probably not what you want to hear, but according to the google guidelines, you really shouldn't be using an image in the header.

You can use a color overlay on your photos to make the text pop. But if the text or icons don't pop on the image you're using, then you should probably be using an image that works better, or a solid color.

If I were you, I'd use a solid color.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.