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. For example:

img {
  filter: blur(5px) brightness(0.8);
}

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, e.g. filter: blur(4px);.
• brightness(): changes the brightness: brightness(0.5) darkens by half, brightness(1.5) brightens.
• contrast(): changes the contrast, e.g. contrast(1.5).
• grayscale(): turns colors into shades of gray, e.g. grayscale(100%).
• hue-rotate(): rotates the hues around the color wheel, e.g. hue-rotate(90deg).
• invert(): inverts the colors, e.g. invert(100%).
• opacity(): sets the transparency, e.g. opacity(50%).
• saturate(): changes the saturation, e.g. saturate(2).
• sepia(): gives the look of an old photograph, e.g. sepia(100%).

3. Combining Filters

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

img {
  filter: grayscale(100%) contrast(1.5) brightness(0.7);
}

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

Filters work in all current browsers; check compatibility only when you have to support very old 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>).

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css"> <!-- Link the CSS file -->
  <title>CSS Filters</title>
</head>
<body>
  <h1>CSS Filters</h1>
  <img src="https://placehold.co/150" class="example-image blur" alt="Sample image">
</body>
</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.

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

The selector .example-image.blur (two classes without a space) reaches only an image that has both classes at once.

Step 4: Add the brightness filter

Add a style for the .example-image class to change the brightness of the image.

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

Step 5: Add the contrast filter

Add a style for the .example-image class to change the contrast of the image.

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

Step 6: Add the grayscale filter

Add a style for the .example-image class to convert the image to grayscale.

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

Step 7: Add the hue-rotate filter

Add a style for the .example-image class to rotate the hues of the image.

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

Step 8: Add the invert filter

Add a style for the .example-image class to invert the colors of the image.

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

Step 9: Add the opacity filter

Add a style for the .example-image class to change the transparency of the image.

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

Step 10: Add the saturate filter

Add a style for the .example-image class to increase the color saturation of the image.

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

Step 11: Add the sepia filter

Add a style for the .example-image class to add a sepia effect to the image.

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

Step 12: Combining filters

Add a style for the .example-image class to apply multiple filters at once.

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

Result

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

HTML file (index.html)

The page with a separate image for each filter:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css"> <!-- Link the CSS file -->
  <title>CSS Filters</title>
</head>
<body>
  <h1>CSS Filters</h1>
  <img src="https://placehold.co/150" class="example-image blur" alt="Blur filter">
  <img src="https://placehold.co/150" class="example-image brightness" alt="Brightness filter">
  <img src="https://placehold.co/150" class="example-image contrast" alt="Contrast filter">
  <img src="https://placehold.co/150" class="example-image grayscale" alt="Grayscale filter">
  <img src="https://placehold.co/150" class="example-image hue-rotate" alt="Hue-rotate filter">
  <img src="https://placehold.co/150" class="example-image invert" alt="Invert filter">
  <img src="https://placehold.co/150" class="example-image opacity" alt="Opacity filter">
  <img src="https://placehold.co/150" class="example-image saturate" alt="Saturate filter">
  <img src="https://placehold.co/150" class="example-image sepia" alt="Sepia filter">
  <img src="https://placehold.co/150" class="example-image combined" alt="Combined filters">
</body>
</html>

CSS file (styles.css)

All the rules from steps 3-12 in one file:

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

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

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

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

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

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

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

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

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

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

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.