Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

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

Javascript Web Development Front End Scripts

JavaScript provides the CSS filter property to adjust image brightness and contrast dynamically. You access these filters through the style.filter property on image elements.

Syntax

element.style.filter = "brightness(value) contrast(value)";

Parameters

Filter Default Value Range Effect
brightness() 100% 0% to 200%+ 0% = black, 100% = normal, 200% = very bright
contrast() 100% 0% to 200%+ 0% = gray, 100% = normal, 200% = high contrast

Example: Interactive Brightness and Contrast

<!DOCTYPE html>
<html>
<body>
    <p>Click below to change the brightness and contrast of the image.</p>
    <button onclick="display()">Edit Image</button>
    <button onclick="reset()">Reset</button><br><br>
    
    <img id="myID" src="/videotutorials/images/tutorial_library_home.jpg"
         alt="Tutorials Library" width="320" height="240">
    
    <script>
        function display() {
            document.getElementById("myID").style.filter = "brightness(50%) contrast(150%)";
        }
        
        function reset() {
            document.getElementById("myID").style.filter = "brightness(100%) contrast(100%)";
        }
    </script>
</body>
</html>

Multiple Filter Effects

You can combine brightness and contrast with other CSS filters:

<!DOCTYPE html>
<html>
<body>
    <img id="filterDemo" src="/videotutorials/images/tutorial_library_home.jpg" 
         alt="Filter Demo" width="300" height="200">
    <br><br>
    <button onclick="applyFilters()">Apply Multiple Filters</button>
    <button onclick="clearFilters()">Clear All</button>
    
    <script>
        function applyFilters() {
            const img = document.getElementById("filterDemo");
            img.style.filter = "brightness(80%) contrast(120%) saturate(150%) blur(1px)";
        }
        
        function clearFilters() {
            document.getElementById("filterDemo").style.filter = "none";
        }
    </script>
</body>
</html>

Dynamic Range Controls

<!DOCTYPE html>
<html>
<body>
    <img id="rangeDemo" src="/videotutorials/images/tutorial_library_home.jpg" 
         alt="Range Demo" width="300" height="200">
    <br><br>
    
    <label>Brightness: </label>
    <input type="range" min="0" max="200" value="100" 
           oninput="updateFilters()" id="brightness">
    <span id="brightnessValue">100%<br>
    
    <label>Contrast: </label>
    <input type="range" min="0" max="200" value="100" 
           oninput="updateFilters()" id="contrast">
    <span id="contrastValue">100%
    
    <script>
        function updateFilters() {
            const brightness = document.getElementById("brightness").value;
            const contrast = document.getElementById("contrast").value;
            
            document.getElementById("rangeDemo").style.filter = 
                `brightness(${brightness}%) contrast(${contrast}%)`;
                
            document.getElementById("brightnessValue").textContent = brightness + "%";
            document.getElementById("contrastValue").textContent = contrast + "%";
        }
    </script>
</body>
</html>

Key Points

  • Use element.style.filter to apply brightness and contrast filters
  • Values are percentages: 100% is normal, 0% removes the effect completely
  • Multiple filters can be combined in one filter string
  • Changes are applied instantly when the filter property is modified
  • Use filter = "none" to remove all filters

Browser Compatibility

CSS filter properties are supported in all modern browsers including Chrome, Firefox, Safari, and Edge. Internet Explorer 10+ has limited support.

Conclusion

JavaScript's CSS filter property provides an easy way to adjust image brightness and contrast dynamically. Combine multiple filters and use range inputs for interactive image editing effects.

Updated on: 2026-03-15T23:18:59+05:30

4K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements