CSS Effects
CSS Filters
The CSS Filter property is used to apply visual effects to elements, especially images.
Filters allow you to modify how an element appears without editing the original image. The supporting concepts are explained in CSS Opacity and Blending & Backdrop.
Common uses include:
- Blurring images
- Adjusting brightness
- Changing contrast
- Creating grayscale effects
- Applying shadows
- Adding artistic visual effects
CSS filters are widely used in modern web design to enhance images and improve user interfaces.
Syntax
Filter Syntax
css
selector {
filter: function(value);
}Filter Example
css
img {
filter: grayscale(100%);
}Converts the image to black and white.
Attributes
| Function | Description | Example |
|---|---|---|
| blur() | Blurs an element | blur(5px) |
| brightness() | Adjusts brightness | brightness(150%) |
| contrast() | Adjusts contrast | contrast(200%) |
| grayscale() | Converts to grayscale | grayscale(100%) |
| sepia() | Applies sepia effect | sepia(100%) |
| drop-shadow() | Adds shadow effect | drop-shadow(5px 5px 10px gray) |
Example
CSS Filters Complete Example
html
<!DOCTYPE html>
<html>
<head>
<title>CSS Filters Example</title>
<style>
.blur {
filter: blur(3px);
}
.grayscale {
filter: grayscale(100%);
}
.brightness {
filter: brightness(150%);
}
.shadow {
filter: drop-shadow(5px 5px 10px gray);
}
img {
width: 250px;
margin: 10px;
}
</style>
</head>
<body>
<img src="https://ik.imagekit.io/html5andcss3/frontend-media/html_example.webp" alt="Blur Example" class="blur">
<img src="https://ik.imagekit.io/html5andcss3/frontend-media/html_example.webp" alt="Grayscale Example" class="grayscale">
<img src="https://ik.imagekit.io/html5andcss3/frontend-media/html_example.webp" alt="Brightness Example" class="brightness">
<img src="https://ik.imagekit.io/html5andcss3/frontend-media/html_example.webp" alt="Shadow Example" class="shadow">
</body>
</html>Browser Support
Feature | Chrome | Edge | Firefox | Safari |
|---|---|---|---|---|
| filter | 53 | 12 | 35 | 9.1 |
Versions show the first stable desktop release with unprefixed support. Data source: MDN Browser Compatibility Data 8.0.8.
Notes
Multiple filters can be combined.
Multiple Filters Example
Multiple Filters Example
css
filter:
grayscale(100%)
blur(2px);Creates a blurred black-and-white image.
Common Filter Functions
| Function | Effect |
|---|---|
| blur() | Softens image |
| brightness() | Lightens or darkens |
| contrast() | Increases contrast |
| grayscale() | Removes color |
| sepia() | Vintage effect |
| drop-shadow() | Adds shadow |
Hover Effect Example
Hover Effect Example
css
img:hover {
filter: grayscale(0%);
}Restores the original image color when hovered.
Conclusion
CSS Filters provide an easy way to apply visual effects to images and elements directly through CSS. Whether you need blur effects, grayscale images, brightness adjustments, or shadows, filters offer powerful styling options without modifying the original media files.