CSS Advanced Filters

CSS advanced filters include properties such as filter, blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, and sepia. These properties enable developers to manipulate the appearance of elements by altering attributes such as color, transparency, sharpness, and more.

By combining different filter functions and properties, developers can create compelling visual effects, transform images, and enhance the overall aesthetics of their webpages. CSS advanced filters provide a powerful toolset for achieving creative and engaging visual presentations on the web.

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

Original	Filter Effect Preview
Filter Code :	Filter: none

This section focuses on the concept of applying multiple CSS filters to an element and understanding how they interact.

• Example: Combining grayscale and blur filters.
Edit Copy Hide

.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 in CSS are specified using the filter property along with the url() function, linking to an SVG file containing the custom filter definition. Let's break down the syntax, usage, and provide an example:

Syntax

Edit Copy Hide

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

Usage

1. Define the SVG Filter File:
• Create an SVG file that contains the filter definition. This file typically includes the element with various filter primitives.

Example: custom-filter.svg

Edit Copy Hide

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

2. Apply the Custom Filter:
• Link to the SVG file using the url() function in the filter property.

Example:

Edit Copy Hide

      .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.

1. Create custom-filter.svg :
Edit Copy Hide

<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.

2. Apply the Filter :
Edit Copy Hide

.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 extend the possibilities of CSS filters by introducing a broader set of filter effects. This section explores the integration of SVG filters with CSS, showcasing their applications and demonstrating how they can be used to create sophisticated visual effects.

• Example: Using a custom SVG filter for a sepia effect.
Edit Copy Hide

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

• Explanation: Here, a custom SVG filter named 'sepia' is applied to the element using the url() function. The SVG file defines a sepia-toned filter.

Animation brings a dynamic aspect to filters. In this part of the tutorial, you'll learn how to animate CSS filters using techniques like CSS animations or transitions. The focus will be on creating smooth transitions between different filter states and incorporating dynamic effects into your web designs.

• Example: Animating the saturation of an image on hover.
Edit Copy Hide

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

• Explanation: The saturation of an image increases smoothly over 0.5 seconds when the user hovers over the container.

The backdrop-filter property is a unique feature in CSS that allows you to apply a filter effect to the area behind an element, such as the background. This section explores the applications of backdrop filters, demonstrating how they can be used to create interesting visual effects on overlapping elements.

• Example: Applying a blur to the background behind an element.
Edit Copy Hide

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

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

Sepia Filter

Edit Copy Hide

/* Apply sepia filter to an element */
.filter-example {
  filter: sepia(100%);
  background-image: url("image.jpg"); /* Set the background image */
}

Edit Copy Hide

<img class="filter-example" src="image.jpg" 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 sepia(100%) value converts the image to a full sepia tone.
• Replace "image.jpg" with the actual path or URL of an image file.

Blur Filter

Edit Copy Hide

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

Edit Copy Hide

<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 blur(5px) value adds a blur effect to the background image of the <div>. The other CSS rules define the width, height, background image, padding, and text color of the <div>.
• Replace "image.jpg" with the actual path or URL of an image file.

Contrast Filter

Edit Copy Hide

/* Apply contrast filter to an element */
.contrast-example {
  filter: contrast(200%); /* Apply a contrast filter of 200% */
    background-image: url("image.jpg"); /* Set the background image */
}

Edit Copy Hide

<img class="contrast-example" src="image.jpg" 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.

Grayscale Filter

Edit Copy Hide

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

Edit Copy Hide

<img class="grayscale-example" src="image.jpg" 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.

Hue-Rotate Filter

Edit Copy Hide

/* 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 */
}

Edit Copy Hide

<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 applied to a <div> element with the class hue-rotate-example. The hue-rotate(90deg) value rotates the hue of the background color of the <div> by 90 degrees.

Invert Filter

Edit Copy Hide

/* 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 */
}

Edit Copy Hide

<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 invert(100%) value inverts the colors of the background color of the <div>.

Opacity Filter

Edit Copy Hide

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

Edit Copy Hide

<img src="image.jpg" 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 opacity(50%) value sets the image's opacity to 50%.

Preview :

Saturate Filter

Edit Copy Hide

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

Edit Copy Hide

<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 saturate(200%) value increases the saturation of the image by 200%.
• Replace "image.jpg" with the actual path or URL of an image file.

Preview :