According to this page .asp there are contrast, brighness, hue, saturation, etc. But no explicit access to gamma. Is there a way to emulate it with the existing CSS3 image filters, or does exist a plugin (JQuery or other JS) which makes it possible?

According to this page http://www.w3schools./cssref/css3_pr_filter.asp there are contrast, brighness, hue, saturation, etc. But no explicit access to gamma. Is there a way to emulate it with the existing CSS3 image filters, or does exist a plugin (JQuery or other JS) which makes it possible?

• javascript
• image
• css
• brightness
• gamma

2 Answers 2

You can use svg filters

#filtered {
  filter: url('#gamma');
}

<img src="https://picsum.photos/seed/picsum/300/200">
<img id="filtered" src="https://picsum.photos/seed/picsum/300/200">

<svg height="0">
  <filter id="gamma">
    <feComponentTransfer>
       <feFuncR type="gamma" exponent="1.5" amplitude="2.5" offset="0" />
       <feFuncG type="gamma" exponent="1.5" amplitude="2.5" offset="0" />
       <feFuncB type="gamma" exponent="1.5" amplitude="2.5" offset="0" />
    </feComponentTransfer>
   </filter>
</svg>

Gamma is more closely related to contrast than anything. While there isn't explicitly a filter for it, you could get near identical results by using small adjustments to brightness and working with contrast primarily.

For example if I wanted to raise the gamma on an image that looks too dark I might try:

filter: contrast(125%) brightness(105%);

keeping in mind to use the brightness primarily to brighten up the darkness in the image, the contrast should be doing most of the work in the case that you want to closely emulate gamma.

Feel free to check out a topic asking about gamma vs brightness here: https://graphicdesign.stackexchange./questions/11445/gamma-vs-brightness-any-difference

Hope that helped. Cheers.