0 added
0 removed
Original
2026-01-01
Modified
2026-03-09
1
<p>CSS filters allow you to apply visual effects to page elements. Filters are usually applied to images, backgrounds, or frames, and sometimes other elements as well.</p>
1
<p>CSS filters allow you to apply visual effects to page elements. Filters are usually applied to images, backgrounds, or frames, and sometimes other elements as well.</p>
2
<p>Filters are applied to an element before it is rendered, so the number of filters affects the page loading speed.</p>
2
<p>Filters are applied to an element before it is rendered, so the number of filters affects the page loading speed.</p>
3
<p>Filters are set using the filter property. Let’s start by getting to know more about them.</p>
3
<p>Filters are set using the filter property. Let’s start by getting to know more about them.</p>
4
<p>Brightness is set using brightness. Numeric values ranging from 0 or higher or percentages are allowed. When the filter is set to a value of 1 or 100%, the element will be displayed unchanged.</p>
4
<p>Brightness is set using brightness. Numeric values ranging from 0 or higher or percentages are allowed. When the filter is set to a value of 1 or 100%, the element will be displayed unchanged.</p>
5
.effect { filter: brightness(2); /* Doubles the brightness */ filter: brightness(10%); /* Reduces the brightness by 10% */ filter: brightness(150%); /* Increases the brightness by 50% */ }<p>Contrast is set using contrast. Just like the brightness filter, you can specify either numbers or percentages for the value.</p>
5
.effect { filter: brightness(2); /* Doubles the brightness */ filter: brightness(10%); /* Reduces the brightness by 10% */ filter: brightness(150%); /* Increases the brightness by 50% */ }<p>Contrast is set using contrast. Just like the brightness filter, you can specify either numbers or percentages for the value.</p>
6
.effect { filter: contrast(0.5); /* Reduces the contrast by half */ filter: contrast(50%); /* Also reduces the contrast by 50% */ }<p>CSS filters are already supported in <a>these browsers</a>.</p>
6
.effect { filter: contrast(0.5); /* Reduces the contrast by half */ filter: contrast(50%); /* Also reduces the contrast by 50% */ }<p>CSS filters are already supported in <a>these browsers</a>.</p>