Brightness Filter

The brightness() filter adjusts how light or dark an element appears. It is like turning the brightness knob on your screen, but just for one element. You can make things brighter than normal or dim them down.

How It Works

The brightness value is a number or percentage. 100% or 1 means no change. Values above 100% make the element brighter, and values below make it darker. A value of 0 turns the element completely black.

.bright {
  filter: brightness(1.5);
}

.dim {
  filter: brightness(0.5);
}

.dark {
  filter: brightness(0.2);
}
    

This is different from changing the background color or opacity. Brightness affects the entire element including text, borders, and images. It preserves the relative colors while shifting the overall lightness.

Hover Brightness Effect

A common pattern is to slightly brighten an image on hover and dim it when not hovered. This gives visual feedback that the element is interactive.

.thumbnail {
  filter: brightness(0.8);
  transition: filter 0.3s ease;
}

.thumbnail:hover {
  filter: brightness(1.1);
}
    

The slight dim at rest makes the brightening on hover more noticeable. This is a subtle but effective way to improve user experience on image galleries and card layouts.

Combining with Other Filters

You can chain multiple filters together. Brightness works well with contrast and saturate to create dramatic visual effects.

.dramatic {
  filter: brightness(0.8) contrast(1.2) saturate(1.3);
}
    

The filters are applied in order from left to right. Each one modifies the result of the previous one. Experiment with different combinations to find the look you want.