How to set the brightness and contrast of an image with JavaScript?

To set the brightness, use the brightness property and for contrast, use the contrast property.


You can try to run the following code to use image filters with JavaScript −

Live Demo

<!DOCTYPE html>
      <p>Click below to change the brightness and contrast of the image.</p>
      <button onclick="display()">Edit Image</button><br><br>
      <img id="myID" src=""
         alt="Tutorials Library" width="320" height="320">
         function display() {
            document.getElementById("myID").style.filter = "brightness(50%)";
            document.getElementById("myID").style.filter = "contrast(50%)";

Updated on: 23-Jun-2020

3K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started