CSS filter
All About EffectsIn this lesson, we will learn how to apply filter on elements like images, text, and backgrounds using the CSS filter property.
CSS filter Property
The CSS filter property is used to apply visual effects to HTML elements. They allow you to alter the appearance of elements like images, text, and backgrounds.
The supported filter functions are:
- blur()
- brightness()
- contrast()
- grayscale()
- saturate()
- sepia()
- invert()
- opacity()
- hue-rotate()
blur()
The blur() filter is used to create a blur effect on elements. It takes a length value as its parameter.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS filter Example</title>
<!-- Internal CSS -->
<style>
img {
filter: blur(5px);
}
</style>
</head>
<body>
<img src="tiger-image.jpg">
</body>
</html>brightness()
The brightness() filter is used to adjust the brightness of elements.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS filter Example</title>
<!-- Internal CSS -->
<style>
img {
filter: brightness(70%);
}
</style>
</head>
<body>
<img src="tiger-image.jpg">
</body>
</html>contrast()
The contrast() filter is used to adjust the contrast of elements.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS filter Example</title>
<!-- Internal CSS -->
<style>
img {
filter: contrast(250%);
}
</style>
</head>
<body>
<img src="tiger-image.jpg">
</body>
</html>grayscale()
The grayscale() filter is used to converts an element to grayscale.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS filter Example</title>
<!-- Internal CSS -->
<style>
img {
filter: grayscale(100%);
}
</style>
</head>
<body>
<img src="tiger-image.jpg">
</body>
</html>saturate()
The saturate() filter is used to increases or decreases the intensity of colors in an element.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS filter Example</title>
<!-- Internal CSS -->
<style>
img {
filter: saturate(200%);
}
</style>
</head>
<body>
<img src="tiger-image.jpg">
</body>
</html>sepia()
The sepia() filter is used to add a sepia tone to an element.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS filter Example</title>
<!-- Internal CSS -->
<style>
img {
filter: sepia(100%);
}
</style>
</head>
<body>
<img src="tiger-image.jpg">
</body>
</html>The image will have a vintage, brownish tone.
invert()
The invert() filter creates a negative effect by inverting the colors of an element.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS filter Example</title>
<!-- Internal CSS -->
<style>
img {
filter: invert(100%);
}
</style>
</head>
<body>
<img src="tiger-image.jpg">
</body>
</html>opacity()
The opacity() filter adjusts the transparency of an element.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS filter Example</title>
<!-- Internal CSS -->
<style>
body {
background-image: url("butterfly-small.png");
}
img {
filter: opacity(80%);
}
</style>
</head>
<body>
<img src="tiger-image.jpg">
</body>
</html>hue-rotate()
The hue-rotate() filter allows you to change the color of an element by rotating its hue on the color wheel.
To shift the hue of an image by 90 degrees (making it look like it's changing colors), you can use:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS filter Example</title>
<!-- Internal CSS -->
<style>
img {
filter: hue-rotate(90deg);
}
</style>
</head>
<body>
<img src="tiger-image.jpg">
</body>
</html>Applying Multiple Filters to HTML Elements
You can also apply multiple filters to an HTML element by using the CSS filter property.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS filter Example</title>
<!-- Internal CSS -->
<style>
img {
filter: brightness(60%) contrast(250%) blur(5px);
}
</style>
</head>
<body>
<img src="tiger-image.jpg">
</body>
</html>