Search code examples
imagecsscolors

How to colorize an image in CSS?

Is there a cross-browser way to use CSS to change the shade of an image. For example, if I have a grayscale icon (an img element), I'd like it to change the colors to sepia on hover.

It would have to work on browsers other than IE, so I can't use filter. Is there some CSS 3 trick that would allow that?

Solution

  • Update many years later: yes, you can colorize an image in CSS

    I've asked for this question to be closed since it's a duplicate, but that probably won't happen because it's very old. Anyway, the currently accepted:

    "if you want to modify an image in css, it isn't possible to do that."

    from the other answer was correct at the time, but has been incorrect for many years now.

    CSS Filters allow you to do this.

    From css filter to make elements one color :

    filter: grayscale(100%) sepia(100%) hue-rotate(90deg);

    There's an online tool to generate the filters necessary to color an image.