CSS filter property
The filter property in CSS is used to apply graphical effects like blurring, sharpening, or color shifting to an element. It allows you to modify the rendering of an element in ways that can enhance or stylize the content without needing to manipulate the source images or content directly.
Syntax
element {
filter: function(value);
}
Common Functions
blur():- Description: Applies a Gaussian blur to the element.
- Syntax:
blur(radius) - Value: The
radiusdefines the spread of the blur in pixels. - Example:
filter: blur(5px);
brightness():- Description: Adjusts the brightness of the element.
- Syntax:
brightness(percentage) - Value: A percentage where
1or100%is normal brightness, less than1darkens the image, and more than1brightens it. - Example:
filter: brightness(150%);
contrast():- Description: Adjusts the contrast of the element.
- Syntax:
contrast(percentage) - Value: A percentage where
1or100%is normal contrast, less than1reduces contrast, and more than1increases it. - Example:
filter: contrast(200%);
grayscale():- Description: Converts the element to grayscale.
- Syntax:
grayscale(percentage) - Value: A percentage where
0%is the original color, and100%is full grayscale. - Example:
filter: grayscale(100%);
invert():- Description: Inverts the colors of the element.
- Syntax:
invert(percentage) - Value: A percentage where
0%is the original color, and100%is full inversion. - Example:
filter: invert(100%);
sepia():- Description: Converts the element to sepia tone.
- Syntax:
sepia(percentage) - Value: A percentage where
0%is the original color, and100%is full sepia. - Example:
filter: sepia(100%);
saturate():- Description: Adjusts the saturation of the element.
- Syntax:
saturate(percentage) - Value: A percentage where
1or100%is normal saturation, less than1desaturates, and more than1oversaturates. - Example:
filter: saturate(300%);
hue-rotate():- Description: Rotates the hue of the element.
- Syntax:
hue-rotate(angle) - Value: The
angledefines the number of degrees the hue should rotate. - Example:
filter: hue-rotate(90deg);
drop-shadow():- Description: Applies a shadow effect to the element similar to the
box-shadowproperty but respects the alpha channel of images. - Syntax:
drop-shadow(offset-x offset-y blur-radius color) - Example:
filter: drop-shadow(10px 10px 5px black);
- Description: Applies a shadow effect to the element similar to the
Multiple Filters
You can apply multiple filters to an element by chaining them together, separated by spaces.
element {
filter: brightness(150%) contrast(200%) blur(2px);
}
Examples
Example 1: Blurring an Image
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blur Example</title>
<style>
.blurred-image {
filter: blur(5px);
}
</style>
</head>
<body>
<img src="your-image-url.jpg" alt="Example Image" class="blurred-image">
</body>
</html>
- This example applies a 5-pixel blur to the image, creating a softened effect.
Example 2: Applying Multiple Filters
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiple Filters Example</title>
<style>
.stylized-image {
filter: brightness(120%) contrast(150%) sepia(80%);
}
</style>
</head>
<body>
<img src="your-image-url.jpg" alt="Example Image" class="stylized-image">
</body>
</html>
- This example adjusts the brightness, contrast, and applies a sepia tone to the image, giving it a vintage look.