CSS filter Property

Description

The filter property lets you apply one or more post-processing graphical effects to an element’s rendered output. Rather than changing an element’s layout box or the document structure, these effects operate on the element’s painted pixels — including its contents and background — producing a modified bitmap that is then composited into the page. Because the visual modifications happen after painting, using filter is a straightforward way to achieve photographic, color, or shadow-like transformations without altering DOM structure or text flow.

When a non-none filter is present the element is typically rendered into an intermediate image (an offscreen bitmap) before the filter operations are applied. That intermediate image is then used for blending and compositing; as a result, the property creates a new stacking context and can affect how the element interacts with other compositing operations. It’s important to note the distinction between this behavior and effects that apply to the backdrop behind an element — for that purpose see backdrop-filter. Also keep in mind that filters are applied before blend modes are evaluated, so they will alter the source image that properties like mix-blend-mode then blend with the page.

Multiple filter functions can be combined and their order matters: the list of functions is processed sequentially so swapping two functions can produce a different final appearance. Because filters generally rasterize the content, applying heavy or multiple filters can introduce softness or aliasing on vector content and may change text rendering quality. If you need strictly vector-preserved effects for SVG content, consider SVG-native filter primitives rather than CSS-level post-processing.

Performance-wise, filters can be both helpful and costly. Modern compositors often accelerate certain filter operations on the GPU, and applying a filter can promote an element to its own layer — which can be beneficial for isolated animations but may increase memory and compositing overhead. Animating expensive filter functions is often far heavier than animating transform or opacity; when possible prefer animating transform or opacity for smoother, less costly motion. If you do animate a filter, combine it with well-chosen timing controls such as transition or CSS animations and profile the impact on frame rate.

Finally, consider user experience and accessibility: dramatic filters can reduce legibility (for example, blurring or extreme contrast changes) and should not be used in ways that obscure essential content. Filters do not change the DOM or accessibility tree, so assistive technologies will still encounter the original document content, but visual users may experience reduced clarity. Also be mindful of overflow and hit-testing implications — because the filter is applied to a painted image, effects that extend outside an element’s original bounds (like a large drop shadow) can be clipped unless container overflow is adjusted.

Definition

Initial value: none
Applies to: All elements
Inherited: No
Computed value: As specified
Animatable: Yes
JavaScript syntax: object.style.filter

Interactive Demo

Syntax

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

Values

blur()Filter for blurring the image. The amount of blur is specified in pixels. If no number is specified, the default is 0.
brightness()The function brightness() dims or brightens images or background pictures.
contrast()The function contrast() decreases or increases the contrast of images or background pictures.
drop-shadow()The function drop-shadow() adds shadow to images. In contrast to the property box-shadow, transparent areas in the image are taken into account and the shadow is cast taking them into account.
grayscale()The function grayscale() turns the image into black and white.
hue-rotate()The hue-rotate() function applies a hue rotation on the input image. The value of angle defines the number of degrees around the color circle the input samples will be adjusted.
invert()The invert() function inverts the samples in the input image. The value of amount defines the proportion of the conversion. A value of 100% is completely inverted. A value of 0% leaves the input unchanged.
opacity()The opacity() function applies transparency to the samples in the input image. The value of amount defines the proportion of the conversion. A value of 0% is completely transparent. A value of 100% leaves the input unchanged.
saturate()The saturate() function saturates the input image. The value of amount defines the proportion of the conversion. A value of 0% is completely un-saturated. A value of 100% leaves the input unchanged.
sepia()The sepia() function converts the input image to sepia. The value of amount defines the proportion of the conversion. A value of 100% is completely sepia. A value of 0% leaves the input unchanged.
url()A CSS link to an SVG element with a specific #id.

Example

HTML

<main class="examples">

    <h1>CSS filter examples</h1>



    <div class="grid">

        <figure>

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

            <figcaption>Original</figcaption>

        </figure>



        <figure>

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

            <figcaption>Grayscale</figcaption>

        </figure>



        <figure>

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

            <figcaption>Blur</figcaption>

        </figure>



        <figure>

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

            <figcaption>Sepia + Contrast</figcaption>

        </figure>



        <figure>

            <div class="color-box hue"></div>

            <figcaption>Hue Rotate</figcaption>

        </figure>



        <figure>

            <img src="https://picsum.photos/id/1015/400/250" alt="Mountain" class="image drop-shadow">

            <figcaption>Drop Shadow</figcaption>

        </figure>



        <figure>

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

            <figcaption>Combined Filters</figcaption>

        </figure>

    </div>

</main>

CSS

/* Layout */
:root {
    --gap: 18px;
    --radius: 8px;
    --bg: #f7f7fa;
    --card-bg: #ffffff;
    --text: #111827;
}

* {
    box-sizing: border-box;
}

body {
    margin: 24px;
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    background: var(--bg);
    color: var(--text);
}

.examples {
    max-width: 1100px;
    margin: 0 auto;
}

h1 {
    font-size: 20px;
    margin-bottom: 14px;
}

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

figure {
    background: var(--card-bg);
    padding: 12px;
    border-radius: var(--radius);
    box-shadow: 0 6px 18px rgba(16, 24, 40, 0.06);
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

figcaption {
    margin-top: 10px;
    font-size: 13px;
    color: #374151;
    text-align: center;
}

/* Media (images / boxes) */
.image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: calc(var(--radius) - 2px);
    transition: filter 260ms ease, transform 260ms ease;
}

.color-box {
    width: 100%;
    height: 150px;
    border-radius: calc(var(--radius) - 2px);
    background: linear-gradient(135deg, #ff8a00 0%, #e52e71 50%, #7b5cff 100%);
    transition: filter 260ms ease;
}

/* Filter examples */
.original {
    filter: none; /* no filtering */
}

.grayscale {
    filter: grayscale(100%);
}

.blur {
    filter: blur(4px);
}

.sepia {
    /* combine filters: sepia + slight contrast increase */
    filter: sepia(60%) contrast(1.06);
}

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

.drop-shadow {
    /* drop-shadow works like box-shadow but follows the alpha of the image */
    filter: drop-shadow(0 12px 14px rgba(0, 0, 0, 0.35));
}

.combined {
    /* chained filters applied left-to-right */
    filter: brightness(0.95) contrast(1.12) saturate(1.4) sepia(18%) hue-rotate(-8deg);
}

/* Hover to emphasize the effect */
figure:hover .image,
figure:hover .color-box {
    transform: translateY(-6px);
    filter: none; /* reveal original on hover for comparison */
}

Result

Editor

Browser Support

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