Home/ Questions/Q 8582741
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T21:22:04+00:00

Is it possible to tint an image with a specific color using CSS without

  • 0

Is it possible to tint an image with a specific color using CSS without an overlay in a WebKit browser?

Failed attempts

  • Managed to tint the image sepia or an arbitrary color using hue-rotate but couldn’t find a way to tint it with a specific color.
  • Creating a “tint” SVG filter and calling it with -webkit-filter: url(#tint) doesn’t work on Chrome.
  • All possible combinations of opacity/box-shadow css properties with drop-shadow/opacity filters don’t generate the desired effect.

Ideas

  • Given a color, wouldn’t it be possible to combine the HSB filters (hue-rotate, saturation, brightness) to generate its tint?
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Eventually it will be, using shaders. See the W3C Docs on Filters.

    At the moment, what is possible for instance is:

    -webkit-filter: grayscale; /*sepia, hue-rotate, invert....*/
-webkit-filter: brightness(50%);

    See

    Update:

    Adobe released its HTML5 based CSS Filter Labs with support for custom filters (Shaders) on supported browsers:

    enter image description here

    • 0