title: Is it possible to adjust the brightness and contrast of an image simultaneously?
body: <p>This might be explained better with pictures than words, so please run the code snippet and see what I mean. When using an image editor I can adjust both the brightness and contrast of an image in one go, resulting in a bright and clear image. But when using CSS, the brightness and contrast are changed sequentially in two steps, giving poor results.</p>
  
  <p>Is there any way of adjusting both brightness and contrast in CSS at the same time? Using SVG or some JavaScript solution would also be okay if necessary.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>Original:&lt;br&gt;
  &lt;img src="https://i.imgur.com/uZP6Tdf.jpg" height="250"&gt;&lt;br&gt;
  
  GIMP - 63 brightness and contrast:&lt;br&gt;
  &lt;img src="https://i.imgur.com/Ba8PHk2.png" height="250"&gt;&lt;br&gt;
  
  CSS - 2 brightness, 2 contrast:&lt;br&gt;
  &lt;img src="https://i.imgur.com/uZP6Tdf.jpg" height="250" style="filter: brightness(2) contrast(2);"&gt;&lt;br&gt;
  
  CSS - 2 contrast, 2 brightness:&lt;br&gt;
  &lt;img src="https://i.imgur.com/uZP6Tdf.jpg" height="250" style="filter: contrast(2) brightness(2);"&gt;</code></pre>
  </div>
  </div>
  </p>