EN
CSS - multiple filters at once
0
points
In this article, we would like to show you how to add multiple filters at the same time using CSS.
Quick solution:
.element {
filter: invert(1) blur(5px); /* adds invert() and blur() filters */
}
Practical example
In order to add multiple filters at the same time to the element, we just need to assign one by one without using any separators. In this example, we used invert() and blur() filter at once.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
.element {
width: 50px;
height: 50px;
background: green;
filter: invert(1) blur(5px); /* inverts green background and adds blur */
}
</style>
</head>
<body>
<div class="element"></div>
</body>
</html>