CSS Filter Enhance Visual Appeal with Graphical Effects

Formal Definition

The filter property in CSS is formally defined to ensure consistent behavior across browsers. Here are the key points:

Initial Value

The initial value for the filter property is none, meaning no filter effects are applied by default.

Applies To

The filter property can be applied to all HTML elements and most SVG elements, making it highly versatile.

Inherited

The filter property is not inherited. This means that filters applied to a parent element do not affect its child elements unless explicitly specified for each child.

Computed Value

The computed value of the filter property is as specified in the CSS, ensuring accurate rendering by the browser.

Animation Type

The animation type for the filter property is a filter function list. Each filter function interpolates according to its specific rules. If the filter lists have different lengths, missing functions are added to the shorter list using default values. If one filter is none, it’s replaced with the filter functions list of the other one using default values. Otherwise, discrete interpolation is used.

Formal Syntax

The formal syntax for the filter property is:

filter: none | <filter-function> [<filter-function>]*

Functions

The filter property offers various functions to apply graphical effects:

1. blur()

   • Applies a blur effect.
   • Example: filter: blur(5px);

2. brightness()

   • Adjusts brightness. 0% is black, 100% is normal.
   • Example: filter: brightness(2);

3. contrast()

   • Adjusts contrast. 0% is gray, 100% is normal.
   • Example: filter: contrast(200%);

4. drop-shadow()

   • Adds a drop shadow.
   • Example: filter: drop-shadow(16px 16px 10px black);

5. grayscale()

   • Converts to grayscale. 100% is fully grayscale.
   • Example: filter: grayscale(100%);

6. hue-rotate()

   • Rotates the hue.
   • Example: filter: hue-rotate(90deg);

7. invert()

   • Inverts colors. 100% is fully inverted.
   • Example: filter: invert(100%);

8. opacity()

   • Adjusts transparency. 0% is fully transparent.
   • Example: filter: opacity(50%);

9. saturate()

   • Adjusts saturation. 0% is fully unsaturated.
   • Example: filter: saturate(200%);

10. sepia()

    • Converts to sepia. 100% is fully sepia.
    • Example: filter: sepia(100%);

Combining Functions

You can combine multiple filter functions by listing them separated by spaces:

filter: blur(5px) grayscale(100%);

Interpolation

When animating the filter property, the transition between filter effects depends on specific rules for each function.

Examples

1. Blur and Grayscale

   filter: blur(5px) grayscale(100%);

2. Brightness and Contrast

   filter: brightness(150%) contrast(120%);

3. Drop Shadow and Hue Rotate

   filter: drop-shadow(5px 5px 10px black) hue-rotate(90deg);

Practical Use Case

Combining filters can create interactive effects. For example, applying blur and grayscale when an image is not in focus, and removing these effects on hover:

img {
  filter: blur(5px) grayscale(100%);
  transition: filter 0.3s ease-in-out;
}

img:hover {
  filter: none;
}

<img src="image.jpg" alt="Example Image">

Understanding and using the filter property effectively can greatly enhance the visual appeal and interactivity of your web designs.

Syntax

The filter property in CSS lets you apply various visual effects to elements. It’s straightforward and allows combining multiple filter effects. Here’s the detailed syntax:

/* <filter-function> values */
filter: blur(5px);
filter: brightness(0.4);
filter: contrast(200%);
filter: drop-shadow(16px 16px 20px blue);
filter: grayscale(50%);
filter: hue-rotate(90deg);
filter: invert(75%);
filter: opacity(25%);
filter: saturate(30%);
filter: sepia(60%);

/* URL */
filter: url("filters.svg#filter-id");

/* Multiple filters */
filter: contrast(175%) brightness(3%);
filter: drop-shadow(3px 3px red) sepia(100%) drop-shadow(-3px -3px blue);

/* Use no filter */
filter: none;

/* Global values */
filter: inherit;
filter: initial;
filter: revert;
filter: revert-layer;
filter: unset;

Basic Syntax

The basic syntax for applying a single filter effect is:

filter: <filter-function>(<value>);

Combining Multiple Filters

To apply multiple filter effects, list them in the filter property, separated by spaces. The filters are applied in the order they are declared.

filter: <filter-function>(<value>) <filter-function>(<value>) ...;

Using URL for SVG Filters

You can also reference an SVG filter using the url() function. This allows you to apply complex filters defined in an SVG file.

filter: url(file.svg#filter-element-id);

Global Values

The filter property also supports global values:

• inherit: Inherits the filter value from the parent element.
• initial: Resets the filter value to its default state.
• revert: Reverts the filter value to the user agent’s default.
• revert-layer: Reverts the filter value to the value specified by the user agent’s stylesheet.
• unset: Resets the filter value to its inherited value if it inherits, or to its initial value if it does not.

Practical Example

Here’s a practical example of how to use the filter property to apply multiple effects to an image:

img {
  border: 5px solid yellow;
}

/* Apply blur and grayscale effects */
img:nth-of-type(2) {
  filter: grayscale(0.4) blur(5px);
}

<img src="pencil.jpg" alt="Original image is sharp" />
<img src="pencil.jpg" alt="The image and border are blurred and muted" />

Examples

Applying Filter Functions

Here’s how to apply various filter functions to an image element on a webpage:

img {
  border: 1px solid blue;
  filter: drop-shadow(5px 5px 0 red) hue-rotate(180deg) drop-shadow(5px 5px 0 red);
}

<svg id="MDN-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 361 104.2" xml:space="preserve" role="img">
  <title>MDN Web Docs</title>
  <path d="M197.6 73.2h-17.1v-5.5h3.8V51.9c0-3.7-.7-6.3-2.1-7.9-1.4-1.6-3.3-2.3-5.7-2.3-3.2 0-5.6 1.1-7.2 3.4s-2.4 4.6-2.5 6.9v15.6h6v5.5h-17.1v-5.5h3.8V51.9c0-3.8-.7-6.4-2.1-7.9-1.4-1.5-3.3-2.3-5.6-2.3-3.2 0-5.5 1.1-7.2 3.3-1.6 2.2-2.4 4.5-2.5 6.9v15.8h6.9v5.5h-20.2v-5.5h6V42.4h-6.1v-5.6h13.4v6.4c1.2-2.1 2.7-3.8 4.7-5.2 2-1.3 4.4-2 7.3-2s5.3.7 7.5 2.1c2.2 1.4 3.7 3.5 4.5 6.4 1.1-2.5 2.7-4.5 4.9-6.1s4.8-2.4 7.9-2.4c3.5 0 6.5 1.1 8.9 3.3s3.7 5.6 3.7 10.2v18.2h6.1v5.5zm42.5 0h-13.2V66c-1.2 2.2-2.8 4.1-4.9 5.6-2.1 1.6-4.8 2.4-8.3 2.4-4.8 0-8.7-1.6-11.6-4.9-2.9-3.2-4.3-7.7-4.3-13.3 0-5 1.3-9.6 4-13.7 2.6-4.1 6.9-6.2 12.8-6.2s9.8 2.2 12.3 6.5V22.7h-8.6v-5.6h15.8v50.6h6v5.5zm-13.3-16.8V52c-.1-3-1.2-5.5-3.2-7.3s-4.4-2.8-7.2-2.8c-3.6 0-6.3 1.3-8.2 3.9-1.9 2.6-2.8 5.8-2.8 9.6 0 4.1 1 7.3 3 9.5s4.5 3.3 7.4 3.3c3.2 0 5.8-1.3 7.8-3.8 2.1-2.6 3.1-5.3 3.2-8zm61.5 16.8H269v-5.5h6V51.9c0-3.7-.7-6.3-2.2-7.9-1.4-1.6-3.4-2.3-5.7-2.3-3.1 0-5.6 1-7.4 3s-2.8 4.4-2.9 7v15.9h6v5.5h-19.3v-5.5h6V42.4h-6.2v-5.6h13.6V43c2.6-4.6 6.8-6.9 12.7-6.9 3.6 0 6.7 1.1 9.2 3.3s3.7 5.6 3.7 10.2v18.2h6v5.4h-.2z" style="fill: var(--text-primary);"></path>
  <g style="fill:blue;">
    <path d="M42 .2 13.4 92.3H1.7L30.2.2H42zM52.4.2v92.1H42V.2h10.4zm40.3 0L64.2 92.3H52.5L81 .2h11.7zM103.1.2v92.1H92.7V.2h10.4zM294 95h67v8.8h-67V95z"></path>
  </g>
</svg>

Browser Compatibility

The filter property is widely supported across modern web browsers. Here is an overview of the browser compatibility:

• Google Chrome: Supported since version 53.0.
• Microsoft Edge: Supported since version 13.0.
• Firefox: Supported since version 35.0.
• Safari: Supported since version 9.1.
• Opera: Supported since version 40.0.
• Internet Explorer: Not supported.

See Also

For more related content, check out these resources:

• CSS backdrop-filter Property: Applies graphical effects to the area behind an element.
• CSS Compositing and Blending Module: Includes properties like background-blend-mode and mix-blend-mode.
• CSS mask Property: Hides portions of an element.
• SVG: Includes the <filter> element and filter attribute for complex effects.
• Applying SVG Effects to HTML Content: A guide on using SVG filters in HTML.

References

• MDN Web Docs: Filter Effects Module Level 1
• W3C: CSS Filter Effects Module Level 1

By leveraging the filter property and related technologies, you can create stunning visual effects that enhance the overall user experience on your website. Experimenting with different filter functions and combining them effectively can help you achieve unique and engaging web designs.