CSS filters are a powerful tool that allows developers to apply visual effects to HTML elements. Filters can be used to adjust the color, brightness, contrast, and other visual properties of an element. In this article, we will explore the different filter properties available in CSS and how they can be used to create stunning visual effects.
CSS filters are a set of properties that allow developers to apply visual effects to HTML elements. Filters can be used to adjust the color, brightness, contrast, and other visual properties of an element. Filters are applied to an element using the filter property in CSS.
The filter property accepts a variety of values, including:
The blur() function is used to create a blur effect on an element. The value of the function determines the amount of blur to apply. For example, a value of 5px would create a blur effect with a radius of 5 pixels.
.blur {
filter: blur(5px);
}
The brightness() function is used to adjust the brightness of an element. The value of the function determines the amount of brightness to apply. For example, a value of 200% would increase the brightness of an element by 200%.
.brightness {
filter: brightness(200%);
}
The contrast() function is used to adjust the contrast of an element. The value of the function determines the amount of contrast to apply. For example, a value of 200% would increase the contrast of an element by 200%.
.contrast {
filter: contrast(200%);
}
The drop-shadow() function is used to create a drop shadow effect on an element. The value of the function determines the size, color, and blur of the shadow. For example, a value of 5px 5px 5px black would create a drop shadow with a size of 5 pixels, a color of black, and a blur of 5 pixels.
.drop-shadow {
filter: drop-shadow(5px 5px 5px black);
}
The grayscale() function is used to create a grayscale effect on an element. The value of the function determines the amount of grayscale to apply. For example, a value of 100% would create a completely grayscale element.
.grayscale {
filter: grayscale(100%);
}
The hue-rotate() function is used to adjust the hue of an element. The value of the function determines the amount of hue rotation to apply. For example, a value of 180deg would rotate the hue of an element by 180 degrees.
.hue-rotate {
filter: hue-rotate(180deg);
}
The invert() function is used to invert the colors of an element. The value of the function determines the amount of inversion to apply. For example, a value of 100% would completely invert the colors of an element.
.invert {
filter: invert(100%);
}
The opacity() function is used to adjust the opacity of an element. The value of the function determines the amount of opacity to apply. For example, a value of 0.5 would make an element 50% transparent.
.opacity {
filter: opacity(0.5);
}
The saturate() function is used to adjust the saturation of an element. The value of the function determines the amount of saturation to apply. For example, a value of 200% would increase the saturation of an element by 200%.
.saturate {
filter: saturate(200%);
}
The sepia() function is used to create a sepia effect on an element. The value of the function determines the amount of sepia to apply. For example, a value of 100% would create a completely sepia element.
.sepia {
filter: sepia(100%);
}
CSS filters are a powerful tool that allows developers to apply visual effects to HTML elements. Filters can be used to adjust the color, brightness, contrast, and other visual properties of an element. By using the different filter properties available in CSS, developers can create stunning visual effects that enhance the user experience of their web applications.