brightness() CSS Function - Playground Example

<!DOCTYPE html><html><head><style type="text/css">.container {
  display: flex;
  gap: 20px;
  font-family: sans-serif;
}

.box {
  text-align: center;
}

/* No change applied */
.normal {
  filter: brightness(100%);
}

/* Increase brightness by 50% */
.bright {
  filter: brightness(1.5); /* You can use decimals (1.5) or percentages (150%) */
}

/* Decrease brightness by 50% */
.dark {
  filter: brightness(50%);
}

img {
  border-radius: 8px;
  width: 200px;
  height: 200px;
}</style></head><body><h2>CSS brightness() Comparison</h2>

  <div class="container">
    <div class="box">
      <p>Original (100%)</p>
      <img src="https://picsum.photos/200" alt="Sample Image" class="normal">
    </div>

    <div class="box">
      <p>Brightened (150%)</p>
      <img src="https://picsum.photos/200" alt="Sample Image" class="bright">
    </div>

    <div class="box">
      <p>Darkened (50%)</p>
      <img src="https://picsum.photos/200" alt="Sample Image" class="dark">
    </div>
  </div></body></html>