We use cookies to enhance your experience on the site
Privacy Policy
OK
CodeWorlds

CSS Filters

1. How to Use Filters in CSS?

Filters are applied to HTML elements using the CSS filter property. You can apply one or more filter effects by combining them in a single expression.

Example:
1img {
2  filter: blur(5px) brightness(0.8);
3}

In this case, the image will be blurred by 5 pixels, and the brightness will be reduced to 80% of its original value.

2. Types of Filters

There are many available filters, each offering a unique effect. Here are some popular ones:

  • blur(): Blurs the element. EXAMPLE
  • brightness(): Controls the brightness of the element. EXAMPLE
  • contrast(): Changes the contrast of the element. EXAMPLE
  • grayscale(): Converts the element to grayscale. EXAMPLE
  • hue-rotate(): Rotates the hues of the element around the color wheel. EXAMPLE
  • invert(): Inverts the colors of the element. EXAMPLE
  • opacity(): Controls the transparency of the element. EXAMPLE
  • saturate(): Controls the color saturation of the element. EXAMPLE
  • sepia(): Adds a sepia effect to the element. EXAMPLE

3. Combining Filters

You can combine different filters to achieve complex effects. Filters are applied in the order they are written.

Example:
1img {
2  filter: grayscale(100%) contrast(1.5) brightness(0.7);
3}

In the example above, the image will first be converted to grayscale, then higher contrast will be applied, and finally the brightness will be reduced.

4. Browser Support

Although filters are supported by most modern browsers, it's always worth checking compatibility, especially if you want your project to work on older browser versions.

Exercise: CSS Filters

In this exercise, you'll learn how to use CSS filters to apply various visual effects to HTML elements. Your task will be to create a web page with an image that will be styled using different CSS filters.

Step 1: Create the basic HTML document structure

First, create a new HTML file and add the basic HTML document structure. Add an 

<img>
element with a sample image in the body of the document (
<body>
).

1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <link rel="stylesheet" href="styles.css"> <!-- Link the CSS file -->
7  <title>CSS Filters</title>
8</head>
9<body>
10  <h1>CSS Filters</h1>
11  <img src="https://via.
12## Practical Application
13
14Practice this concept in the editor below.
15</body>
16</html>

Step 2: Create the CSS file

Open or create a new CSS file and save it as 

styles.css
.

Step 3: Add the blur filter

Add a style for the 

.example-image
class to apply a blur effect to the image.

1/* Blur filter */
2.example-image.blur {
3  filter: blur(5px);
4}

Step 4: Add the brightness filter

Add a style for the 

.example-image
class to change the brightness of the image.

1/* Brightness filter */
2.example-image.brightness {
3  filter: brightness(0.8);
4}

Step 5: Add the contrast filter

Add a style for the 

.example-image
class to change the contrast of the image.

1/* Contrast filter */
2.example-image.contrast {
3  filter: contrast(1.5);
4}

Step 6: Add the grayscale filter

Add a style for the 

.example-image
class to convert the image to grayscale.

1/* Grayscale filter */
2.example-image.grayscale {
3  filter: grayscale(100%);
4}

Step 7: Add the hue-rotate filter

Add a style for the 

.example-image
class to rotate the hues of the image.

1/* Hue-rotate filter */
2.example-image.hue-rotate {
3  filter: hue-rotate(90deg);
4}

Step 8: Add the invert filter

Add a style for the 

.example-image
class to invert the colors of the image.

1/* Invert filter */
2.example-image.invert {
3  filter: invert(100%);
4}

Step 9: Add the opacity filter

Add a style for the 

.example-image
class to change the transparency of the image.

1/* Opacity filter */
2.example-image.opacity {
3  filter: opacity(50%);
4}

Step 10: Add the saturate filter

Add a style for the 

.example-image
class to increase the color saturation of the image.

1/* Saturate filter */
2.example-image.saturate {
3  filter: saturate(2);
4}

Step 11: Add the sepia filter

Add a style for the 

.example-image
class to add a sepia effect to the image.

1/* Sepia filter */
2.example-image.sepia {
3  filter: sepia(100%);
4}

Step 12: Combining filters

Add a style for the 

.example-image
class to apply multiple filters at once.

1/* Combined filters */
2.example-image.combined {
3  filter: grayscale(100%) contrast(1.5) brightness(0.7);
4}

Result

After completing all the steps, your HTML and CSS files should look as follows:

HTML file (index.html)

1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <link rel="stylesheet" href="styles.css"> <!-- Link the CSS file -->
7  <title>CSS Filters</title>
8</head>
9<body>
10  <h1>CSS Filters</h1>
11  <img src="https://via.
12## Practical Application
13
14Practice this concept in the editor below.
15  <img src="https://via.
16## Practical Application
17
18Practice this concept in the editor below.
19  <img src="https://via.
20## Practical Application
21
22Practice this concept in the editor below.
23  <img src="https://via.
24## Practical Application
25
26Practice this concept in the editor below.
27  <img src="https://via.
28## Practical Application
29
30Practice this concept in the editor below.
31  <img src="https://via.
32## Practical Application
33
34Practice this concept in the editor below.
35  <img src="https://via.
36## Practical Application
37
38Practice this concept in the editor below.
39  <img src="https://via.
40## Practical Application
41
42Practice this concept in the editor below.
43  <img src="https://via.
44## Practical Application
45
46Practice this concept in the editor below.
47  <img src="https://via.
48## Practical Application
49
50Practice this concept in the editor below.
51</body>
52</html>

CSS file (styles.css)

1/* Blur filter */
2.example-image.blur {
3  filter: blur(5px);
4}
5
6/* Brightness filter */
7.example-image.brightness {
8  filter: brightness(0.8);
9}
10
11/* Contrast filter */
12.example-image.contrast {
13  filter: contrast(1.5);
14}
15
16/* Grayscale filter */
17.example-image.grayscale {
18  filter: grayscale(100%);
19}
20
21/* Hue-rotate filter */
22.example-image.hue-rotate {
23  filter: hue-rotate(90deg);
24}
25
26/* Invert filter */
27.example-image.invert {
28  filter: invert(100%);
29}
30
31/* Opacity filter */
32.example-image.opacity {
33  filter: opacity(50%);
34}
35
36/* Saturate filter */
37.example-image.saturate {
38  filter: saturate(2);
39}
40
41/* Sepia filter */
42.example-image.sepia {
43  filter: sepia(100%);
44}
45
46/* Combined filters */
47.example-image.combined {
48  filter: grayscale(100%) contrast(1.5) brightness(0.7);
49}

Experiment Further

  1. Add more elements with different filters to better understand how different filters work.
  2. Try adding more styles to your page, e.g., changing colors, sizes, and other CSS properties.
  3. Test your skills by creating more complex effects using different combinations of filters.

After completing this exercise, you should better understand how to use different CSS filters to apply various visual effects to HTML elements.

Go to CodeWorlds→