Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Role of CSS Filters
CSS filters allow you to apply visual effects like blur, brightness, contrast, and more to HTML elements without using external graphics. The filter property provides a powerful way to manipulate the rendering of images, backgrounds, and even text elements.
Syntax
selector {
filter: filter-function(value);
}
Common Filter Functions
| Filter Function | Description | Value Range |
|---|---|---|
blur() |
Applies blur effect | 0px to any px value |
brightness() |
Adjusts brightness | 0% to any percentage |
contrast() |
Adjusts contrast | 0% to any percentage |
grayscale() |
Converts to grayscale | 0% to 100% |
hue-rotate() |
Rotates hue colors | 0deg to 360deg |
Example: Basic Image Filters
The following example demonstrates various filter effects applied to images −
<!DOCTYPE html>
<html>
<head>
<style>
.filter-container {
display: flex;
gap: 20px;
flex-wrap: wrap;
}
.filter-box {
width: 150px;
height: 100px;
background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
text-align: center;
line-height: 100px;
color: white;
font-weight: bold;
}
.blur { filter: blur(3px); }
.brightness { filter: brightness(150%); }
.contrast { filter: contrast(200%); }
.grayscale { filter: grayscale(100%); }
</style>
</head>
<body>
<div class="filter-container">
<div class="filter-box">Original</div>
<div class="filter-box blur">Blur</div>
<div class="filter-box brightness">Bright</div>
<div class="filter-box contrast">Contrast</div>
<div class="filter-box grayscale">Grayscale</div>
</div>
</body>
</html>
Five colored boxes are displayed in a row: the original gradient box, a blurred version, a brighter version, a high-contrast version, and a grayscale version.
Example: Combining Multiple Filters
You can combine multiple filter functions by separating them with spaces −
<!DOCTYPE html>
<html>
<head>
<style>
.combined-filter {
width: 200px;
height: 150px;
background: radial-gradient(circle, #ff9a9e, #fecfef, #fecfef);
margin: 20px;
filter: brightness(120%) contrast(150%) hue-rotate(45deg);
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
color: #333;
}
</style>
</head>
<body>
<div class="combined-filter">Combined Filters</div>
</body>
</html>
A rounded box with a radial gradient background that appears brighter, more contrasted, and with shifted hue colors compared to the original gradient.
Browser Support
CSS filters are well-supported in modern browsers, but older versions may not support all filter functions. Always test your designs across different browsers when using advanced filter effects.
Conclusion
CSS filters provide an efficient way to apply visual effects without external graphics. They're perfect for creating hover effects, image galleries, and dynamic visual enhancements while keeping your code lightweight and maintainable.
242 Views
