CSS mask-image Property

Ever wondered how Google’s logo is displayed on Chrome home page differently according to different themes!

Like below:

Google logo does not change with your theme

Here’s the reality!

The image behind themed based logo is the Google’s original logo (no doodle)

The trick lies is in CSS 3: CSS mask-image Property

In the image above the -webkit-mask-image is masking div as the original google logo png.

And via background color – the theme sets the color matching to your chrome theme.

CSS mask-image property specifies an image to be used as a mask layer for an element.