CSS <filter-function> Data Type

Description

The <filter-function> CSS data type represents a single operation in a chain of graphical effects that can be applied to elements using the filter property. Each <filter-function> describes a transformation or visual modification, such as blurring, adjusting brightness, or applying a color matrix, and can be combined with other filter functions to produce complex visual effects. This allows designers to enhance or manipulate the rendering of images, backgrounds, or entire elements without modifying the source content.

Each <filter-function> operates independently and produces an output that subsequent filter functions in the list will process. For instance, a blur() function softens the pixels of an image, while a brightness() function alters the luminosity of the pixels. By chaining multiple <filter-function> values, you can achieve layered effects that would otherwise require image editing software. This modular approach is particularly powerful for dynamic web content, as it allows live adjustments through JavaScript or user interaction.

<filter-function> also supports functions that involve color manipulation, like hue-rotate() or sepia(), which can create artistic or corrective effects. Additionally, certain functions such as drop-shadow() can simulate three-dimensional depth by applying shadows relative to the element. When combined with other CSS properties like transform or transition, <filter-function> becomes a key tool for producing interactive, visually engaging user interfaces.

Example usage:

img {
  filter: blur(5px) brightness(1.2) contrast(120%);
}

div.card {
  filter: drop-shadow(4px 4px 10px rgba(0,0,0,0.5)) hue-rotate(90deg);
}

In this example, the first rule applies a blur, increases brightness, and boosts contrast on an image, demonstrating multiple <filter-function> values in a chain. The second rule applies a drop shadow and rotates the hue of a card element, showing how visual styling can be layered to enhance presentation.

You can also dynamically update <filter-function> values using JavaScript to animate effects in real time:

const img = document.querySelector('img');
img.style.filter = 'blur(0px) brightness(1)';

img.addEventListener('mouseover', () => {
  img.style.filter = 'blur(3px) brightness(1.5)';
});

This makes highly versatile for interactive designs and creative visual effects on the web.

Syntax

<filter-function> = <blur()> | <brightness()> | <contrast()> | <drop-shadow()> | <grayscale()> | <hue-rotate()> | <invert()> | <opacity()> | <sepia()> | <saturate()>

Values

<blur()>Blurs the image.
<brightness()>Makes the image brighter or darker.
<contrast()>Increases or decreases the image's contrast.
<drop-shadow()>Applies a drop shadow behind the image.
<grayscale()>Converts the image to grayscale.
<hue-rotate()>Changes the overall hue of the image.
<invert()>Inverts the colors of the image.
<opacity()>Makes the image transparent.
<sepia()>Converts the image to sepia.
<saturate()>Super-saturates or desaturates the input image.

Example

HTML

<div class="gallery">

    <figure>

        <img src="https://picsum.photos/id/1015/400/250" alt="Mountain" />

        <figcaption>Original</figcaption>

    </figure>



    <figure>

        <img class="filter-blur" src="https://picsum.photos/id/1015/400/250" alt="Blur" />

        <figcaption>blur(6px)</figcaption>

    </figure>



    <figure>

        <img class="filter-brightness" src="https://picsum.photos/id/1015/400/250" alt="Brightness" />

        <figcaption>brightness(1.4) contrast(1.2)</figcaption>

    </figure>



    <figure>

        <img class="filter-sepia" src="https://picsum.photos/id/1015/400/250" alt="Sepia" />

        <figcaption>sepia(90%) saturate(120%)</figcaption>

    </figure>



    <figure>

        <img class="filter-hue" src="https://picsum.photos/id/1015/400/250" alt="Hue rotate" />

        <figcaption>hue-rotate(90deg)</figcaption>

    </figure>



    <figure>

        <div class="drop-shadow demo-box">Drop-shadow</div>

        <figcaption>drop-shadow(10px 10px 8px rgba(0,0,0,0.4))</figcaption>

    </figure>



    <figure>

        <img class="interactive" src="https://picsum.photos/id/1015/400/250" alt="Interactive filter" />

        <figcaption>Hover to toggle filters</figcaption>

    </figure>

</div>

CSS

/* Layout */
:root {
    --gap: 18px;
    --card-bg: #111827;
    --card-foreground: #e6eef6;
}

body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    background: linear-gradient(180deg, #0f172a 0%, #071029 100%);
    color: var(--card-foreground);
    margin: 32px;
}

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--gap);
    align-items: start;
}

figure {
    background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
    border-radius: 12px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    box-shadow: 0 4px 18px rgba(2,6,23,0.6);
}

figcaption {
    font-size: 13px;
    color: #c9d7e6;
    opacity: 0.9;
}

img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
    object-fit: cover;
}

/* Examples of CSS  usage */

.filter-blur {
    /* blur() applies a Gaussian blur  -  accepts length values */
    filter: blur(6px);
}

.filter-brightness {
    /* brightness() accepts a number (1 = original). Can be combined with other filters */
    filter: brightness(1.4) contrast(1.2);
}

.filter-sepia {
    /* sepia() accepts a percentage; saturate() multiplies saturation */
    filter: sepia(90%) saturate(1.2);
}

.filter-hue {
    /* hue-rotate() accepts an angle  -  shifts colors around the color wheel */
    filter: hue-rotate(90deg);
}

.drop-shadow {
    display: flex;
    align-items: center;
    justify-content: center;
}

.demo-box {
    width: 100%;
    height: 140px;
    background: linear-gradient(135deg, #6ee7b7 0%, #3b82f6 100%);
    color: rgba(2,6,23,0.95);
    font-weight: 600;
    border-radius: 8px;
    /* drop-shadow() creates a shadow that follows the element's alpha channel */
    filter: drop-shadow(10px 10px 8px rgba(0,0,0,0.4));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
}

/* Interactive example: combine multiple filter functions and animate */
.interactive {
    transition: filter 280ms cubic-bezier(.2,.9,.2,1), transform 280ms ease;
    /* initial state: slightly muted */
    filter: grayscale(20%) contrast(0.95) saturate(0.95);
}

.interactive:hover {
    /* on hover we combine multiple filter functions */
    filter: grayscale(0%) hue-rotate(20deg) saturate(1.25) drop-shadow(0 12px 22px rgba(2,6,23,0.55));
    transform: translateY(-6px) scale(1.02);
}

/* Small responsive tweaks */
@media (max-width: 520px) {
    .demo-box {
        height: 110px;
    }
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS filter-function data type. Hover over a browser icon to see the version that first introduced support for this CSS data type.