CSS filters are a set of visual effects that can be applied to HTML elements using CSS. They allow you to modify the appearance of elements by applying various image processing effects, such as blurring, color shifting, brightness adjustment, and more.
CSS Filters
Grayscale
.grayscale-image {
filter: grayscale(100%);
}
<img src="image.jpg" alt="Grayscale Image" class="grayscale-image">
This example applies the grayscale filter to an image, converting it to grayscale. The filter property with the value grayscale(100%) is used to remove color from the image.
![Grayscale Image](../images/example.png)
Blur
.blurred-box {
filter: blur(5px);
}
<div class="blurred-box">Blured Text Example</div>
This example applies the blur filter to a <div> element, creating a blurred background or element. The filter property with the value blur(5px) is used to add a blur effect, with a blur radius of 5px.
Brightness
.bright-text {
filter: brightness(150%);
}
<p class="bright-text">Bright Text</p>
This example increases the brightness of a paragraph element, making the text appear brighter. The filter property with the value brightness(150%) is used to enhance the brightness to 150% of the original brightness.
Bright Text
Contrast
.high-contrast-image {
filter: contrast(200%);
width: 200px;
height: 200px;
background-color: gray;
}
<div class="high-contrast-image">Content Here</div>
This example applies the contrast filter to a <div> element, enhancing the contrast between light and dark areas of the element. The filter property with the value contrast(200%) is used to increase the contrast to 200% of the original contrast.
Hue Rotation
.rotated-text {
transform: rotate(90deg);
display: inline-block; /* Ensure the element takes up space */
}
<span class="rotated-text">Rotated Text</span>
This example rotates the hue of a <span> element, changing the color appearance of the text. The filter property with the value hue-rotate(90deg) is used to rotate the hue by 90 degrees.
Saturation
.desaturated-box {
filter: saturate(50%);
width: 200px;
height: 200px;
background-color: lightgray;
}
<div class="desaturated-box">Desaturated box example</div>
This example reduces the saturation of a <div> element, making the colors appear less vibrant. The filter property with the value saturate(50%) is used to decrease the saturation to 50% of the original saturation.
Invert
.inverted-image {
filter: invert(100%);
}
<img src="image.jpg" alt="Inverted Image" class="inverted-image">
This example applies the invert filter to an image, inverting its colors. The filter property with the value invert(100%) is used to completely invert the colors of the image.
![Inverted Image](../images/example.png)
Drop Shadow
.shadowed-box {
filter: drop-shadow(3px 3px 5px rgba(0, 0, 0, 0.3));
width: 200px;
height: 200px;
background-color: lightgray;
}
<div class="shadowed-box">Content Here</div>
This example adds a drop shadow effect to a <div> element, creating a shadow behind the element. The filter property with the value drop-shadow(3px 3px 5px rgba(0, 0, 0, 0.3)) is used to apply a drop shadow with a horizontal offset of 3 pixels, a vertical offset