Home 〉 CSS Tutorials 〉 CSS Filter Property: Blur, Brightness, Grayscale & More with Examples
CSS Filter Property: Blur, Brightness, Grayscale & More with Examples !
CSS Filter Property: Blur, Brightness, Grayscale & More with Examples !
Want to apply visual effects to images or elements? The `filter` property lets you blur, brighten, or grayscale elements using values like `blur()`, `brightness()`, and `contrast()`. This is especially useful for image galleries and hover effects.
Introduction
The 'filter' property in CSS is used to apply visual effects to elements like images, backgrounds, and containers. You can blur images, adjust brightness, make things grayscale, and even add drop shadows — all with a single line of CSS!
Why Use the CSS 'filter' Property?
With 'filter', you can:
- Improve user interface design.
- Add special effects to images or backgrounds.
- Reduce the need for editing images manually.
Basic Syntax
Syntax ✍
filter: <filter-function>(value);
You can use one or more filter functions like
'blur()', 'brightness()', 'contrast()', 'grayscale()', 'sepia()', 'hue-rotate()', 'invert()', 'opacity()', 'saturate()', and 'drop-shadow()'.
Step-by-Step CSS Filter Examples
1. Blur
Code : 1 📝 
<!DOCTYPE html>
<html>
<body>
<img src="/images/image.jpg" style="filter: blur(5px);" alt="Blur Example">
</body>
</html>
output 📌
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
Explanation: Adds a soft blur. Increase the value to blur more.
2. Brightness
Code : 2 📝
<!DOCTYPE html>
<html>
<body>
<img src="/images/image.jpg" style="filter: brightness(150%);" alt="Bright Example">
</body>
</html>
output 📌
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
Explanation: Makes the image 50% brighter. Use values less than 100% to darken.
3. Grayscale
Code : 3 📝
<!DOCTYPE html>
<html>
<body>
<img src="/images/image.jpg" style="filter: grayscale(100%);" alt="Grayscale Example">
</body>
</html>
output 📌
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
Explanation: Converts the image to black and white.
4. Contrast
Code : 4 📝
<!DOCTYPE html>
<html>
<body>
<img src="/images/image.jpg" style="filter: contrast(200%);" alt="Contrast Example">
</body>
</html>
output 📌
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
Explanation: Increases contrast. Use '100%' for no change.
5. Sepia
Code : 5 📝
<!DOCTYPE html>
<html>
<body>
<img src="/images/image.jpg" style="filter: sepia(100%);" alt="Sepia Example">
</body>
</html>
output 📌
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
Explanation: Gives an old photo look.
6. Hue Rotate
Code : 6 📝
<!DOCTYPE html>
<html>
<body>
<img src="/images/image.jpg" style="filter: hue-rotate(90deg);" alt="Hue Rotate Example">
</body>
</html>
output 📌
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
Explanation: Rotates colors around the color wheel.
7. Invert
Code : 7 📝
<!DOCTYPE html>
<html>
<body>
<img src="/images/image.jpg" style="filter: invert(100%);" alt="Invert Example">
</body>
</html>
output 📌
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
Explanation: Inverts the colors (like a photo negative).
8. Opacity
Code : 8 📝
<!DOCTYPE html>
<html>
<body>
<img src="/images/image.jpg" style="filter: opacity(50%);" alt="Opacity Example">
</body>
</html>
output 📌
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
Explanation: Reduces the element's transparency.
9. Saturate
Code : 9 📝
<!DOCTYPE html>
<html>
<body>
<img src="/images/image.jpg" style="filter: saturate(200%);" alt="Saturate Example">
</body>
</html>
output 📌
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
Explanation: Increases color intensity.
10. Drop Shadow
Code : 10 📝
<!DOCTYPE html>
<html>
<body>
<img src="/images/image.jpg" style="filter: drop-shadow(10px 10px 5px gray);" alt="Drop Shadow Example">
</body>
</html>
output 📌
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
Explanation: Adds a shadow around the element. Very useful for icons and transparent PNGs.
Combining Filters
You can apply multiple filters at once:
Code : 11 📝
<!DOCTYPE html>
<html>
<body>
<img src="/images/image.jpg" style="filter: grayscale(100%) brightness(120%);" alt="Multiple Filters">
</body>
</html>
output 📌
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
Explanation: This image is black and white with increased brightness.
Pro Tip: Use 'transition' for Smooth Effects
When combined with ':hover':
Code : 12 📝
<!DOCTYPE html>
<html>
<head>
<style>
.filter-img {
filter: grayscale(100%);
transition: filter 0.5s;
}
.filter-img:hover {
filter: grayscale(0%);
}
</style>
</head>
<body>
<img class="filter-img" src="/images/image.jpg">
</body>
</html>
output 📌
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
Explanation: Removes grayscale on hover with a smooth transition.
Summary Table
| Filter Type | Example Syntax | What It Does |
|---|---|---|
| 'blur()' | 'blur(5px)' | Blurs the element |
| 'brightness()' | 'brightness(150%)' | Brightens or darkens |
| 'grayscale()' | 'grayscale(100%)' | Converts to black & white |
| 'contrast()' | 'contrast(200%)' | Changes contrast |
| 'sepia()' | 'sepia(100%)' | Vintage brown tone |
| 'hue-rotate()' | 'hue-rotate(90deg)' | Rotates colors |
| 'invert()' | 'invert(100%)' | Inverts the colors |
| 'opacity()' | 'opacity(50%)' | Adjusts transparency |
| 'saturate()' | 'saturate(200%)' | Enhances color intensity |
| 'drop-shadow()' | 'drop-shadow(10px 10px 5px gray)' | Adds a shadow |
Conclusion
The CSS 'filter' property gives you creative control over your web visuals. Whether you want to blur an image, add a stylish drop shadow, or give a modern grayscale effect — filters make it fast and easy.
Try combining different filters for cool effects, and use 'hover' and 'transition' to make interactive designs.
Suggested Posts:
- HTML img Tag | Complete Guide to HTML Image Tag with Syntax & Attributes
- CSS Pseudo-Classes Explained with Examples | Complete Guide for Beginners
Related Topics:
- CSS Transform Property Explained | Rotate, Scale, Translate, and Skew in CSS
- CSS Transition Property Explained with Easy Examples | Learn CSS Animation
- CSS box-shadow Tutorial: Create Stunning Shadows with Examples
Frequently Asked Questions (FAQs)
What does the CSS filter property do?
It applies visual effects like blur, brightness, and grayscale to HTML elements.
Can I use multiple filters together?
Yes, just list them separated by space.
Does filter work on all elements?
Mostly used on images and block elements, but it can be applied to any visible element.
Is CSS filter supported in all browsers?
Yes, modern browsers support it well. Always check on [Can I Use](https://caniuse.com/) if unsure.