Images play a crucial role in web design, and with CSS, we can enhance their appearance and add effects to them to make them look more attractive. CSS provides a variety of image effects and filters that can be used to manipulate images in different ways.
In this article, we’ll explore some of the most common CSS image effects and filters, with examples of each.
Blur Effect
The blur effect is used to blur the image and make it look slightly out of focus. The CSS blur function can be used to create a blur effect on an image. The function accepts a length value that represents the amount of blur.
img {
filter: blur(5px);
}
Grayscale Effect
The grayscale effect is used to convert the image to a grayscale image, where all the colors in the image are represented in different shades of gray. The CSS grayscale function can be used to create a grayscale effect on an image. The function accepts a value between 0 and 1, where 0 is the original image and 1 is the fully grayscale image.
img {
filter: grayscale(1);
}
Brightness Effect
The brightness effect is used to change the brightness of an image. The CSS brightness function can be used to create a brightness effect on an image. The function accepts a value between 0 and 1, where 0 is the darkest and 1 is the original brightness.
img {
filter: brightness(0.5);
}
Contrast Effect
The contrast effect is used to change the contrast of an image. The CSS contrast function can be used to create a contrast effect on an image. The function accepts a value between 0 and 1, where 0 is the lowest contrast and 1 is the original contrast.
img {
filter: contrast(1.5);
}
Saturate Effect
The saturate effect is used to change the saturation of an image. The CSS saturate function can be used to create a saturation effect on an image. The function accepts a value between 0 and 1, where 0 is the least saturated and 1 is the original saturation.
img {
filter: saturate(0.5);
}
Hue-Rotate Effect
The hue-rotate effect is used to change the hue of an image. The CSS hue-rotate function can be used to create a hue-rotate effect on an image. The function accepts a degree value that represents the amount of hue rotation.
img {
filter: hue-rotate(90deg);
}
Invert Effect
The invert effect is used to invert the colors of an image. The CSS invert function can be used to create an invert effect on an image. The function accepts a value between 0 and 1, where 0 is the original image and 1 is the fully inverted image.
img {
filter: invert(1);
}
Opacity Effect
The opacity effect is used to change the opacity of an image. The CSS opacity property can be used to create an opacity effect on an image. The property accepts a value between 0 and 1, where 0 is fully transparent and 1 is fully opaque.
img {
opacity: 0.5;
}
Drop Shadow Effect
The drop shadow effect is used to add a shadow to an image. The CSS box-shadow property can be used to create a drop shadow effect on an image. The property accepts several values that determine the shadow’s position, size, and color.
img {
box-shadow: 10px 10px 5px #888888;
}
Border Effect
The border effect is used to add a border to an image. The CSS border property can be used to create a border effect on an image. The property accepts several values that determine the border’s width, style, and color.
img {
border: 5px solid #000000;
}
Demo
Codepen of all css effects together.
In conclusion, CSS provides a wide range of image effects and filters that can be used to enhance the appearance of images in a website. By combining these effects and filters, you can create unique and eye-catching images that will enhance the overall look and feel of your website.
I hope this article helps you understand the basics of CSS image effects and filters. Try experimenting with these effects and filters and see how you can incorporate them into your web design projects.
Efficient User 