start learning
Image 1
2CSSAdvancedFilters

CSS Advanced Filters

CSS advanced filters refer to a group of properties that allow developers to apply various visual effects and adjustments to elements on a webpage. These filters go beyond basic color modifications and provide advanced control over elements such as images, videos, and other graphical content.

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.

Basic Filters

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


Original Filter Effect Preview
Original Image
Filter Code : Filter: none

Combining Filters

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


Custom Filter Functions

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


    .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

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

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

  3. Apply the Filter :
  4. 
    .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 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.


Filter Animations

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.


Backdrop Filter

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.


Real-world Examples

Sepia Filter

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

<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' -->
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("image.jpg"); /* Set the background image */
}

<div class="blur-example">Blur Example</div> 
<!-- Create a div with class 'blur-example' and content 'Blur Example' -->
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("image.jpg"); /* Set the background image */
}
<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' -->
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("image.jpg"); /* Set the background image */
}
<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' -->
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 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.

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

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("image.jpg"); /* Set the background image */
}

<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 : 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("image.jpg"); /* Set the background image */
}

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

Filters Browser Compatibility

Filter Property Description Chrome Firefox Safari Edge Opera
filter: blur() Gaussian blur effect Chrome 4.0+ Firefox 3.5+ Safari 6.0+ Edge 12+ Opera 10.5+
filter: grayscale() Converts image to grayscale Chrome 18.0+ Firefox 35.0+ Safari 6.0+ Edge 12+ Opera 15.0+
filter: sepia() Applies a sepia tone Chrome 18.0+ Firefox 35.0+ Safari 6.0+ Edge 12+ Opera 15.0+
filter: brightness() Adjusts image brightness Chrome 18.0+ Firefox 35.0+ Safari 6.0+ Edge 12+ Opera 15.0+
filter: contrast() Adjusts image contrast Chrome 18.0+ Firefox 35.0+ Safari 6.0+ Edge 12+ Opera 15.0+
filter: hue-rotate() Rotates image hue Chrome 18.0+ Firefox 35.0+ Safari 6.0+ Edge 12+ Opera 15.0+
filter: saturate() Increases image saturation Chrome 18.0+ Firefox 35.0+ Safari 6.0+ Edge 12+ Opera 15.0+
filter: invert() Inverts colors Chrome 18.0+ Firefox 35.0+ Safari 6.0+ Edge 12+ Opera 15.0+
filter: drop-shadow() Adds a drop shadow Chrome 12.1+ Firefox 3.5+ Safari 6.0+ Edge 79+ Opera 10.5+

Resources for Further Learning

Explore the possibilities and create unique effects on your web pages by using the interactive code editor

HTML

Write and customize HTML code

CSS

Add style and design to your web pages with CSS

JavaScript

Enhance interactivity with JavaScript code

Go to Code Editor
×