The Palos Publishing Company

Follow Us On The X Platform @PalosPublishing
Categories We Write About

Create a custom screen dimmer tool

Written by

Bernardo Palos

in

Creating a custom screen dimmer tool can be done in several ways depending on the platform and environment you want it for—whether a desktop app, web app, or mobile. Here, I’ll provide a simple but functional custom screen dimmer implemented as a web-based tool using HTML, CSS, and JavaScript.

This tool works by adding a transparent dark overlay on the whole screen that can be adjusted with a slider, effectively dimming the screen.

html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Custom Screen Dimmer Tool</title>
<style>
  body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
    font-family: Arial, sans-serif;
  }

  #dimmer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background-color: rgba(0, 0, 0, 0); /* Start fully transparent */
    transition: background-color 0.3s ease;
    z-index: 9999;
  }

  #controlPanel {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: #222;
    color: white;
    padding: 12px 20px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
    z-index: 10000;
    display: flex;
    align-items: center;
    gap: 12px;
    user-select: none;
  }

  #slider {
    width: 200px;
  }

  label {
    font-size: 14px;
  }

  #percentage {
    min-width: 40px;
    text-align: right;
  }
</style>
</head>
<body>

<div id="dimmer"></div>

<div id="controlPanel">
  <label for="slider">Dim Level:</label>
  <input type="range" id="slider" min="0" max="90" step="1" value="0" />
  <div id="percentage">0%</div>
</div>

<script>
  const dimmer = document.getElementById('dimmer');
  const slider = document.getElementById('slider');
  const percentage = document.getElementById('percentage');

  slider.addEventListener('input', () => {
    const value = slider.value;
    // Update overlay opacity based on slider (0-90%)
    const opacity = value / 100;
    dimmer.style.backgroundColor = `rgba(0, 0, 0, ${opacity})`;
    percentage.textContent = value + '%';
  });
</script>

</body>
</html>

How this works:

  • The #dimmer div covers the entire viewport with a transparent black overlay.

  • The slider controls the opacity of this overlay from 0% (no dimming) to 90% (very dim).

  • The overlay uses CSS rgba(0,0,0,opacity) for smooth transparency.

  • The control panel stays fixed and lets you adjust the dim level on the fly.

You can open this as a standalone HTML file on any modern browser and it will dim your screen interactively. You can customize the max dim level, colors, and UI as needed. If you want me to create this as a desktop app (Electron, Python, etc.) or a browser extension, just let me know!

Share this Page your favorite way: Click any app below to share.
See all the ways to share this page

Enter your email below to join The Palos Publishing Company Email List

We respect your email privacy

Check Out Our Newest Posts we wrote about

Categories We Write About