Take the 2-minute tour ×

is it possible to color a grayscale background image using css3?

It is for an icon. I want it to be blue.

input[name=email] { background-image: url(/static/images/icons/glyphicons_010_envelope.png); background-size: 16px auto; background-position: 8px 7px; }
share|improve this question
See: stackoverflow.com/questions/609273/… –  Puyol Sep 22 '12 at 11:36
add comment

1 Answer

up vote 1 down vote accepted

One posibility is to overlay a blue + alpha color on the image.

And one posibility to do this would be:

.base {
    width: 200px;
    height: 200px;
    background: linear-gradient(45deg, black, white, black);
#shadow {
    box-shadow: 0px 0px 3000px 0 rgba(0,0,255,0.5) inset;

To avoid looking for a black & white image, I have set a gradient in base.

Then, in shadow, I create an inset shadow of a huge size, and blue with alpha 0.5


In the demo, you can see the base image, and the same image tinted in blue.


The box shadow is set as inset, so that it is inside the box, around the border. If the size would be too small, you would see the center of the box without shadow.

And, since the color is blue with an alpha, it is somewhat transparent and you can see the background thru it.

share|improve this answer
Can you explain how the box-shadow is coloring the background image? I'm not understanding how this works. –  chovy Aug 5 '13 at 23:43
Added explanation ! –  vals Aug 17 '13 at 19:37
Thanks. I understand, but the middle of your demo shadow is gray still. Only the edges are tinted blue. –  chovy Aug 21 '13 at 4:21
I see it ok in Chrome, IE 10 and Firefox. In wich browser do you see it wrong ? –  vals Aug 25 '13 at 17:36
Chrome...on Macbook Pro retina display. Its quite noticeable. imgur.com/QqvbYwd –  chovy Aug 26 '13 at 20:43
show 2 more comments

Your Answer


