CssHow-ToBeginner · 3 min read

How to Use Brightness Filter in CSS: Simple Guide

Use the filter property with brightness() in CSS to change an element's brightness. The value inside brightness() is a number where 1 means normal brightness, less than 1 darkens, and greater than 1 brightens the element.

📐

Syntax

The brightness() function is used inside the CSS filter property to adjust brightness.

filter: CSS property to apply visual effects.
brightness(value): Function where value is a number or percentage.
value = 1 means original brightness.
value < 1 darkens the element.
value > 1 brightens the element.

css

selector {
  filter: brightness(value);
}

💻

Example

This example shows a colored box with normal brightness, a darker version, and a brighter version using the brightness() filter.

css

html, body {
  height: 100%;
  margin: 0;
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: center;
  background: #f0f0f0;
  font-family: Arial, sans-serif;
}
.box {
  width: 100px;
  height: 100px;
  background-color: #4a90e2;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
  border-radius: 8px;
  user-select: none;
}
.normal {
  filter: brightness(1);
}
.darker {
  filter: brightness(0.5);
}
.brighter {
  filter: brightness(1.5);
}

Output

Three blue boxes side by side labeled 'Normal', 'Darker', and 'Brighter'. The 'Darker' box looks half as bright, the 'Brighter' box looks 50% brighter.

⚠️

Common Pitfalls

Common mistakes when using brightness() include:

Using values outside a reasonable range (like negative numbers) which have no effect or cause errors.
Forgetting that brightness(1) means no change, so setting it to 0 will make the element completely black.
Applying filter on inline elements without setting display to inline-block or block may not show the effect properly.

css

/* Wrong: negative value does nothing */
.element {
  filter: brightness(-1);
}

/* Right: use positive values only */
.element {
  filter: brightness(0.8); /* slightly darker */
}

📊

Quick Reference

Summary tips for using brightness() filter:

Value 1: Original brightness.
Less than 1: Darker effect.
Greater than 1: Brighter effect.
Works on images, backgrounds, text, and any visible element.
Combine with other filters by separating with spaces, e.g., filter: brightness(1.2) contrast(1.1);

✅

Key Takeaways

Use the CSS filter property with brightness() to adjust element brightness easily.

A brightness value of 1 means no change; less than 1 darkens, greater than 1 brightens.

Avoid negative or zero values to prevent unexpected results.

Apply filter on block or inline-block elements for consistent effects.

You can combine brightness with other CSS filters by listing them separated by spaces.