The filter attribute of CSS is used to add various graphic effects to elements, such as blur, color offset, etc. It supports a variety of filter functions, such as blur(), brightness(), contrast(), etc. It can be used alone or in combination to create more complex effects.
Preface
The filter property can be set to none or one or more of the functions listed below. If any function's arguments are invalid, the function returns none. Except for special instructions, if the value of the function accepts a percentage value (such as 34%), the function also accepts a decimal value (such as 0.34).
When a single filter attribute has multiple functions, the filters are applied in sequence.
blur() function
The blur() function is a value of the filter attribute, which is used to add blur effect to elements.
When using the blur() function, you need to specify a length value as a parameter to indicate the degree of blur to be applied. The greater the blur, the more blurry the image becomes. For example:
.blur-element {
filter: blur(5px);
}
The above code will add a 5-pixel blur effect to the element with class "blur-element".
In addition to the length value, the blur() function can also accept other units, such as pixels (px), percentages (%), etc. In addition, more complex effects can also be created by using different combinations of filter functions.
Example
<!DOCTYPE html>
<html>
<head>
<style>
body,
html {
height: 100%;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
}
.blur-element {
width: 300px;
height: 200px;
background-image: url('img/');
filter: blur(5px);
}
</style>
</head>
<body>
<div class="blur-element"></div>
</body>
</html>In the example above, we create a div element with class "blur-element" and set its background image to 'img/'. Then, in CSS style, we set the width, height, and filter properties for the element. The filter attribute's blur() function is set to 5 pixels, which will apply a 5 pixel blur effect to the element.
brightness() function
The brightness() function in the filter property of CSS is used to adjust the brightness of the image. It can accept a percentage value or a decimal as a parameter to specify the level of brightness.
Here is an example of using the brightness() function:
.brightness-element {
filter: brightness(150%); /* Or filter: brightness(1.5); */
}
The above code will apply a 50% brightness increase effect to elements with class "brightness-element". You can change the level of brightness by adjusting the value of percentage or decimal. A value of 0% creates an all-black image, a value greater than 100% increases brightness, and a value less than 100% decreases brightness.
If you want to reduce the brightness, you can use a decimal value less than 1 or a percentage less than 100%. For example, filter: brightness(0.8) reduces brightness to 80%.
It should be noted that the brightness() function can be used in combination with other filter functions to create more complex effects.
Example
<!DOCTYPE html>
<html>
<head>
<style>
body,
html {
height: 100%;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
}
.blur-element {
width: 300px;
height: 200px;
background-image: url('img/');
filter: brightness(150%);
}
</style>
</head>
<body>
<div class="blur-element"></div>
</body>
</html>contrast() function
The contrast() function in the filter property of CSS is used to adjust the contrast of the image. It accepts a percentage value or decimal as a parameter to specify the level of contrast.
Here is an example of using the contrast() function:
.contrast-element {
filter: contrast(150%); /* Or filter: contrast(1.5); */
}
The above code will apply a 50% contrast increase effect to elements with class "contrast-element". The level of contrast can be changed by adjusting the percentage or decimal value. A value of 0% will gray the image, a value greater than 100% will increase the contrast, and a value less than 100% will decrease the contrast.
If you want to reduce the contrast, you can use a decimal value less than 1 or a percentage less than 100%. For example, filter: contrast(0.8) reduces contrast to 80%.
Example
<!DOCTYPE html>
<html>
<head>
<style>
body,
html {
height: 100%;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
}
.blur-element {
width: 300px;
height: 200px;
background-image: url('img/');
filter: contrast(150%);
}
</style>
</head>
<body>
<div class="blur-element"></div>
</body>
</html>drop-shadow() function
The drop-shadow() function in the filter property of CSS is used to add shadow effects to images. It can accept multiple parameters, including the color of the shadow, offset, ambiguity, etc.
Here is an example of using the drop-shadow() function:
.shadow-element {
filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));
}
The above code will apply a shadow effect that is offset 2 pixels to the lower right corner, spreads 4 pixels outward, and has a translucent black color to the element with a class "shadow-element".
The drop-shadow() function has three necessary parameters: horizontal offset, vertical offset, and fuzzy radius. The color of the shadow can be specified by adding the fourth parameter. If the fourth parameter is omitted, a shadow with the same color as the element is used by default.
The following is the parameter description of the drop-shadow() function:
Horizontal offset: The amount of horizontal displacement of the shadow relative to the element. Can be negative, indicating that the shadow is shifted to the left. Vertical offset: The amount of vertical displacement of the shadow relative to the element. Can be negative, indicating that the shadow is shifted upward. Blur radius: The radius size of the shadow blur. It can be 0, indicating that it is not blurred at all. Shadow color: The color of the shadow. You can use named colors, RGB values, hexadecimal colors, HSL values, etc. to represent the format of the color, or you can use the rgba() function to specify the color and transparency.
Example
<!DOCTYPE html>
<html>
<head>
<style>
body,
html {
height: 100%;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
}
.blur-element {
width: 300px;
height: 200px;
background-image: url('img/');
filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.5));
}
</style>
</head>
<body>
<div class="blur-element"></div>
</body>
</html>grayscale() function
The grayscale() function in the filter property of CSS is used to convert an image to a grayscale image. It accepts a percentage value or decimal as a parameter to specify the level of grayscale.
The following is an example of using the grayscale() function:
.grayscale-element {
filter: grayscale(50%); /* Or filter: grayscale(0.5); */
}
The above code will apply a grayscale effect to the element class "grayscale-element" to make the image become 50% of the original brightness. The level of gray can be changed by adjusting the percentage or decimal value. A value of 100% or 1 indicates complete grayscale, while a value of 0% or 0 indicates complete recovery of the primary color.
If you want to partially apply grayscale effects, you can use the grayscale function in combination with other filter functions. For example, you can use the following code to turn a part of the image into grayscale while maintaining the primary color of the other parts:
.grayscale-element {
filter: grayscale(100%) brightness(150%);
}
Example
<!DOCTYPE html>
<html>
<head>
<style>
body,
html {
height: 100%;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
}
.blur-element {
width: 300px;
height: 200px;
background-image: url('img/');
filter: grayscale(1) brightness(200%);
}
</style>
</head>
<body>
<div class="blur-element"></div>
</body>
</html>hue-rotate() (en-US) function
The hue-rotate() function in the filter property of CSS is used to perform hue rotation on an image. It accepts an angle value as a parameter that specifies the angle of rotation.
The following is an example of using the hue-rotate() function:
.hue-rotate-element {
filter: hue-rotate(90deg);
}
The above code will apply a hue rotation effect to the element with class "hue-rotate-element" to rotate the hue of the image clockwise by 90 degrees. The degree of rotation can be changed by adjusting the angle value.
The parameter of the hue-rotate() function is an angle value, which can be represented by angle units (such as deg) or radian units (such as rad). Positive values indicate clockwise rotation, and negative values indicate counterclockwise rotation. The angle value can be any real number, but parts that exceed 360 degrees or -360 degrees will be ignored. If the value is 0deg, the image will not change.
Example
<!DOCTYPE html>
<html>
<head>
<style>
body,
html {
height: 100%;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
}
.blur-element {
width: 300px;
height: 200px;
background-image: url('img/');
filter: hue-rotate(90deg);
}
</style>
</head>
<body>
<div class="blur-element"></div>
</body>
</html>invert() (en-US) function
The invert() function in the filter attribute of CSS is used to invert the image. It accepts a percentage value or decimal as a parameter to specify the degree of inverting color.
Here is an example of using the invert() function:
.invert-element {
filter: invert(50%); /* Or filter: invert(0.5); */
}
The above code will apply an invert effect to the element class "invert-element" to keep the image's color opposite to the original, and the brightness and contrast unchanged. The degree of inversion can be changed by adjusting the percentage or decimal value. A value of 100% or 1 means a complete inversion, while a value of 0% or 0 means a complete return to the primary color.
If you want to partially apply the inverting effect, you can use the inverting function in combination with other filter functions. For example, you can use the following code to turn a part of the image into an inverted color while keeping the original color of the other parts:
.invert-element {
filter: invert(100%) brightness(150%);
}
Example
<!DOCTYPE html>
<html>
<head>
<style>
body,
html {
height: 100%;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
}
.blur-element {
width: 300px;
height: 200px;
background-image: url('img/');
filter: invert(100%) brightness(150%);
}
</style>
</head>
<body>
<div class="blur-element"></div>
</body>
</html>opacity() function
The opacity() function in the filter attribute of CSS is used to adjust the opacity (transparency) of an element. It accepts a percentage value or decimal as a parameter to specify the level of transparency of the element.
The following is an example of using the opacity() function:
.opacity-element {
filter: opacity(50%); /* Or filter: opacity(0.5); */
}
The above code will apply a transparent effect to the element with class "opacity-element" to reduce the transparency of the element to the original 50%. The level of transparency can be changed by adjusting the percentage or decimal value. A value of 100% or 1 means completely opaque, while a value of 0% or 0 means completely transparent.
It should be noted that the opacity() function will affect the transparency of elements and their content, including text, images, etc. If you only want to adjust the transparency of the background and keep the text opaque, you can consider using the rgba color value to set the transparency of the background color.
Example
<!DOCTYPE html>
<html>
<head>
<style>
body,
html {
height: 100%;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
}
.blur-element {
width: 300px;
height: 200px;
background-image: url('img/');
filter: opacity(50%);
}
</style>
</head>
<body>
<div class="blur-element"></div>
</body>
</html>Saturate() (en-US) function
The saturate() function in the filter property of CSS is used to adjust the saturation of the image. It accepts a percentage value or decimal as a parameter to specify the level of saturation.
Here is an example of using saturate() function:
.saturate-element {
filter: saturate(200%); /* Or filter: saturate(2); */
}
The above code will apply a saturation enhancement effect to elements with class "saturate-element" to make the image more vivid.
The level of saturation can be changed by adjusting the percentage or decimal value. A value of 100% or 1 means keeping the original saturation unchanged, while a value of 0% or 0 means completely removing saturation (i.e., gray image). A value greater than 100% or 1 indicates a enhanced saturation, while a value less than 100% or 1 indicates a reduced saturation.
Example
<!DOCTYPE html>
<html>
<head>
<style>
body,
html {
height: 100%;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
}
.blur-element {
width: 300px;
height: 200px;
background-image: url('img/');
filter: saturate(200%);
}
</style>
</head>
<body>
<div class="blur-element"></div>
</body>
</html>sepia() (en-US) function
The sepia() function in the filter property of CSS is used to convert images to dark brown (retro) effects. It accepts a percentage value or decimal as a parameter to specify the degree of sepia (brown) effect.
Here is an example of using the sepia() function:
.sepia-element {
filter: sepia(100%); /* Or filter: sepia(1); */
}
The above code will apply a sepia effect to the element class "sepia-element" to give the image a retro brown tone. The degree of sepia effect can be changed by adjusting the percentage or decimal value. A value of 100% or 1 means that the sepia effect is fully applied, while a value of 0% or 0 means that the sepia effect is completely applied.
Example
<!DOCTYPE html>
<html>
<head>
<style>
body,
html {
height: 100%;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
}
.blur-element {
width: 300px;
height: 200px;
background-image: url('img/');
filter: sepia(100%);
}
</style>
</head>
<body>
<div class="blur-element"></div>
</body>
</html>Combination functions
The filter attribute of CSS supports the combination of multiple filter functions to create more complex effects. Multiple functions can be linked together by spaces, and their order will affect the final effect.
Here are some common filter attribute combination functions:
1. brightness() and contrast()
.brightness-contrast {
filter: brightness(150%) contrast(150%);
}
The above code will apply a brightness enhancement and contrast enhancement effect to elements with class "brightness-contrast" to make the image more vivid.
2. Blur() and opacity()
.blur-opacity {
filter: blur(5px) opacity(50%);
}
The above code will apply a blur and transparent effect to elements with class "blur-opacity" to make the image blur and translucent.
3. Grayscale(), sepia() and saturate()
.grayscale-sepia-saturate {
filter: grayscale(100%) sepia(50%) saturate(200%);
}
The above code will apply a grayscale, brown and saturation enhancement to the elements class "grayscale-sepia-saturate" to the image in a retro grey tone.
Summarize
The filter attribute of CSS applies graphic effects such as blur or color offset to elements. Filters are often used to adjust rendering of images, backgrounds, and borders.
This is the article about adding various graphic effects usage examples for CSS filter attributes. For more relevant CSS filter attribute usage examples, please search for my previous articles or continue browsing the related articles below. I hope you can support me in the future!