CSS Advanced Filters Tutorial: Enhance Your website with Stylish Filters

CSS advanced filters are properties that let developers add various visual effects to elements on a webpage. They offer more than just basic color changes and give advanced control over images, videos, and other graphics.

CSS advanced filters include properties like filter, blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, and sepia. These allow developers to change attributes such as color, transparency, and sharpness.

By mixing different filter functions, developers can create eye-catching effects, transform images, and improve the look of their webpages. CSS advanced filters are a powerful way to make web designs more creative and engaging.

Basic Filters

These Table showcase the application of CSS filters to HTML elements including The filter code:

Original	Filter Effect Preview

Filter Code :	Filter: none

Combining Filters

This section explains how to apply multiple CSS filters to an element and how they work together.

Example: Combining grayscale and blur filters.


.combined-filters {
    filter: grayscale(50%) blur(5px);
}

Explanation: This combines a grayscale filter with a blur filter, resulting in an element that is partially desaturated and slightly blurred.

Custom Filter Functions

Custom filter functions in CSS use the filter property with the url() function to link to an SVG file that defines the custom filter. Here’s a breakdown of the syntax, how to use it, and an example:

Syntax


 .element-class {
filter: url('path/to/your-filter-file.svg#filter-id');
    }

Usage

Define the SVG Filter File:

Create an SVG file that includes the filter definition, typically using the element with different filter primitives.

Example: custom-filter.svg

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <defs>
        <filter id="custom-filter">
            <!-- Your filter primitives go here -->
        </filter>
    </defs>
</svg>

Apply the Custom Filter:

Link to the SVG file using the url() function in the filter property.

Example:


      .filtered-element {
filter: url('custom-filter.svg#custom-filter');
      }

Example

Let's create a simple SVG filter that adds a red tint to an element.

Create custom-filter.svg :

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <defs>
        <filter id="red-tint">
            <feColorMatrix type="matrix"/>
        </filter>
    </defs>
</svg>

This filter uses the <feColorMatrix> primitive to set the red channel to full strength while keeping the green and blue channels at zero.

Apply the Filter :


.tinted-element {
    filter: url('custom-filter.svg#red-tint');
}

Now, any element with the class .tinted-element will have a red tint applied to it using the custom filter defined in custom-filter.svg.

SVG Filters

SVG filters enhance CSS filters by providing more filter effects. This section looks at how to use SVG filters with CSS to create advanced visual effects.

Example: Applying a custom SVG filter for a sepia effect.


.custom-filter {
    filter: url('sepia.svg#sepia');
}

Explanation: A custom SVG filter named 'sepia' is applied to the element using the url() function, defining a sepia-toned filter.

Filter Animations

Animation adds a dynamic element to filters. This section will cover how to animate CSS filters using techniques like CSS animations and transitions, focusing on smooth transitions between different filter states to create dynamic effects in your web designs.

Example: Animating the saturation of an image on hover.


.image-container {
     filter: saturate(100%);
     transition: filter 0.5s ease-in-out;
}
.image-container:hover {
    filter: saturate(150%);
}

The saturation of the image smoothly increases over 0.5 seconds when the user hovers over the container.

Backdrop Filter

The backdrop-filter property is a unique feature in CSS that enables the application of filter effects to the area behind an element, such as the background. This section explores the applications of backdrop filters, demonstrating how they can create intriguing visual effects on overlapping elements.

Example: Applying a blur to the background behind an element.


.blurred-background {
    backdrop-filter: blur(10px);
}

The backdrop-filter property is used to apply a 10px blur to the background behind the element, creating a frosted glass effect.

Real-world Examples

Sepia Filter


/* Apply sepia filter to an element */
.filter-example {
  filter: sepia(100%);
  background-image: url("https://www.ptutorials.com/images/example.png"); /* Set the background image */
}


<img class="filter-example" src="https://www.ptutorials.com/images/example.png" alt="Filter Example"> 
  <!-- Image with class 'filter-example', source, and alt attributes -->
<div class="filter-example">Filter Example</div> 
  <!-- Div with class 'filter-example' and content 'Filter Example' -->

In this example, the filter property is applied to an <img> element with the class filter-example. The value sepia(100%) converts the image to a full sepia tone.
Replace "image.jpg" with the actual path or URL of an image file.

Preview :

Sepia Filter Preview

Blur Filter


/* Apply blur filter to an element */
.blur-example {
  filter: blur(5px); /* Apply a blur filter with a radius of 5 pixels */
  background-image: url("https://www.ptutorials.com/images/example.png"); /* Set the background image */
}


<div class="blur-example">Blur Example</div> 
<!-- Create a div with class 'blur-example' and content 'Blur Example' -->

In this example, the filter property is applied to a <div> element with the class blur-example. The value blur(5px) adds a blur effect to the background image of the <div>. The other CSS rules specify the width, height, background image, padding, and text color of the <div>.
Be sure to replace "image.jpg" with the actual path or URL of your image file.

Preview :

Blur Filter Preview

Contrast Filter


/* Apply contrast filter to an element */
.contrast-example {
  filter: contrast(200%);
  /* Apply a contrast filter of 200% */
  background-image: url("https://www.ptutorials.com/images/example.png"); /* Set the background image */
}

<img class="contrast-example" src="https://www.ptutorials.com/images/example.png" alt="Contrast Example"> 
     <!-- Image with class 'contrast-example', source, and alt attributes -->
<div class="contrast-example">Contrast Example</div> 
<!-- Div with class 'contrast-example' and content 'Contrast Example' -->

In this example, the filter property is applied to an <img> element with the class contrast-example. The contrast(200%) value increases the contrast of the image by 200%.
Replace "image.jpg" with the actual path or URL of an image file.

Preview :

Contrast Filter Preview

Grayscale Filter

/* Apply grayscale filter to an element */
.grayscale-example {
  filter: grayscale(100%);
  /* Apply a grayscale filter with a value of 100% */
  background-image: url("https://www.ptutorials.com/images/example.png"); /* Set the background image */
}

<img class="grayscale-example" src="https://www.ptutorials.com/images/example.png" alt="Grayscale Example"> 
<!-- Image with class 'grayscale-example', source, and alt attributes -->
<div class="grayscale-example">Grayscale Example</div> 
<!-- Div with class 'grayscale-example' and content 'Grayscale Example' -->

In this example, the filter property is applied to an <img> element with the class grayscale-example. The grayscale(100%) value converts the image to full grayscale.
Replace "image.jpg" with the actual path or URL of an image file.

Preview :

Grayscale Filter Preview

Hue-Rotate Filter

/* Apply a hue-rotate transformation to an element */
.hue-rotate-example {
  transform: rotate(90deg); /* Rotate the element by 90 degrees */
  background-color: orange; /* Set the background color to orange */
}

<div class="hue-rotate-example">Hue-Rotate Example</div>
<!-- Create a div with class 'hue-rotate-example' and content 'Hue-Rotate Example' -->

In this example, the filter property is used on a <div> with the class hue-rotate-example. The value hue-rotate(90deg) changes the background color's hue by 90 degrees.

Preview :

Hue-Rotate Preview

Invert Filter

/* Apply an invert filter to an element */
.invert-example {
  filter: invert(100%);
  /* Apply an invert filter with a value of 100% */
  background-color: blue; /* Set the background color to blue */
}

<div class="invert-example">Invert Example</div> 
<!-- Create a div with class 'invert-example' and content 'Invert Example' -->

In this example, the filter property is applied to a <div> element with the class invert-example. The value invert(100%) inverts the colors of the background of the <div>, creating a striking visual effect.

Preview :

Invert Filter Preview

Opacity Filter

/* Apply an opacity filter to an element */
.opacity-example {
  filter: opacity(50%);
  /* Apply an opacity filter with a value of 50% */
  background-image: url("https://www.ptutorials.com/images/example.png"); /* Set the background image */
}

<img src="https://www.ptutorials.com/images/example.png" alt="Inverted Image" class="inverted-image"> 
<!-- Image with source, alt, and class attributes -->

In this example, the filter property is applied to an <img> element with the class opacity-example. The value opacity(50%) sets the image's opacity to 50%, making it semi-transparent.

Preview : Opacity Example

Saturate Filter

/* Apply a saturate filter to an element */
.saturate-example {
  filter: saturate(200%); /* Apply a saturate filter with a value of 200% */
      background-image: url("https://www.ptutorials.com/images/example.png"); /* Set the background image */
}


<div class="shadowed-box">Content Here</div> 
<!-- Create a div with class 'shadowed-box' and content 'Content Here' -->

In this example, the filter property is applied to an <img> element with the class saturate-example. The value saturate(200%) increases the saturation of the image by 200%.
Make sure to replace "image.jpg" with the actual path or URL of your image file.

Preview : Saturate Example

Note: We aim to make learning easier by sharing top-quality tutorials, but please remember that tutorials may not be 100% accurate, as occasional mistakes can happen. Once you've mastered the language, we highly recommend consulting the official documentation to stay updated with the latest changes. If you spot any errors, please feel free to report them to help us improve.