Theory
Theory
Comments

Combination of Filters

Several filters can be applied to the same block at the same time. To do this, all filters are simply listed separated by spaces after the word filter:

.effect {
  filter: sepia(50%);
  filter: sepia(50%) blur(5px);
  filter: sepia(50%) blur(5px) opacity(50%);
}

You should keep in mind that if you list the filters in a different order, you will get a different result. This is because each subsequent filter is applied to the image after the effect of the previous filter has already been applied.

Let’s try this out in practice.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Combination of Filters</title> <link href="course.css" rel="stylesheet"> <link href="style.css" rel="stylesheet"> </head> <body> <div class="image"> <img src="img/spb-6.jpg" alt=""> </div> <div class="compare"> <div class="compare-left multi-filter-1"> <div class="image"> <img src="img/spb-6.jpg" alt=""> </div> </div> <div class="compare-right multi-filter-2"> <div class="image"> <img src="img/spb-6.jpg" alt=""> </div> </div> </div> </body> </html>

CSS

.multi-filter-1 img { } .multi-filter-2 img { }

Goalscompleted

Apply the filter hue-rotate (90deg) to the image in the .multi-filter-1 block,
then add the second filter saturate(2),
and finally apply the third filter sepia (0.8).
Apply a combination of three filters in the following order to the image in the .multi-filter-2 block: sepia(0.8),hue-rotate(90deg), and saturate(2).

Combination of Filters

Comments

Log in

Sign up

Restore access