Back

CSS Backdrop: Creating modern effects with `backdrop-filter`

Avatar of Andre Lanius Andre Lanius - 17. September 2026 - CSS / SCSS - 4 minute read
[Translate to English:] CSS Backdrop Filter

CSS Backdrop allows you to create modern and visually appealing effects directly using CSS. Of particular interest is the `backdrop-filter` property, which can be used to blur, brighten or change the colour of the area behind an element, for example. This creates effects that are now commonly found on modern websites, in navigation bars, overlays and user interfaces.

A well-known example is glassmorphism. Transparent areas, a subtle background blur and semi-transparent colours create the impression of glass. The advantage is that many of these effects require neither images nor JavaScript nor additional libraries. With just a few CSS properties, a modern look can be achieved directly in the browser.

In this article, we’ll take a closer look at various possibilities offered by CSS Backdrop. As well as a simple introduction to `backdrop-filter: blur()`, we’ll also cover transparency, colour tones, shadows and combinations of several CSS properties. The examples demonstrate how these effects can be used in practice for navigation, maps, overlays or other elements on a website.

It’s also worth taking a look at browser support and the differences between `filter` and `backdrop-filter`. Whilst `filter` alters the element itself, `backdrop-filter` affects the visible area behind the element. It is precisely this difference that makes CSS Backdrop particularly interesting for modern web design and opens up many creative possibilities.

Example 1: CSS Backdrop Blur

The ` backdrop-filter: blur()` property can be used to blur the area behind an element. For the effect to be visible, the element must have a partially transparent background. This technique is particularly well suited to overlays, navigation bars or semi-transparent maps.

HTML 

<div class="backdrop-blur">
    <div class="backdrop-blur__content">
        <h3>CSS Backdrop Blur</h3>
        <p>
            The background behind this element
            is blurred.
        </p>
    </div>
</div>

CSS / SCSS 

.backdrop-blur {
    position: relative;

    padding: 40px;

    border-radius: 16px;

    background:
        linear-gradient(
            135deg,
            #138eac,
            #102a43
        );

    overflow: hidden;

    &amp;::before {
        content: "";

        position: absolute;
        width: 180px;
        height: 180px;

        top: -60px;
        left: -40px;

        border-radius: 50%;

        background: #fff;
    }

    &amp;__content {
        position: relative;
        z-index: 1;

        padding: 30px;

        border: 1px solid rgba(255, 255, 255, 0.25);
        border-radius: 14px;

        background: rgba(255, 255, 255, 0.15);

        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);

        colour: #fff;
    }

    h3 {
        margin: 0 0 10px;
    }

    p {
        margin: 0;
    }
}

Example 2: Glassmorphism with CSS Backdrop

Glassmorphism is a popular use case for CSS Backdrop. A semi-transparent area is combined with a blur effect. This makes the element look like a pane of glass through which the content behind it remains visible.

HTML 

<div class="glass-card">

    <div class="glass-card__icon">
        <i class="fa-solid fa-layer-group"></i>
    </div>

    <h3>Glassmorphism</h3>

    <p>
        A transparent surface with
        a soft background blur.
    </p>

</div>

CSS / SCSS 

.glass-card {
    position: relative;

    max-width: 420px;

    padding: 40px;

    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 20px;

    background: rgba(255, 255, 255, 0.12);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.15);

    colour: #fff;

    &amp;__icon {
        display: flex;
        align-items: centre;
        justify-content: centre;

        width: 58px;
        height: 58px;

        margin-bottom: 22px;

        border-radius: 50%;

        background: rgba(255, 255, 255, 0.15);

        font-size: 22px;
    }

    h3 {
        margin: 0 0 12px;
    }

    p {
        margin: 0;
        color: rgba(255, 255, 255, 0.75);
    }
}

Example 3: Darkening the background using `brightness()`

The ` backdrop-filter: brightness()` property can be used to adjust the brightness of the area behind an element. The element’s actual content remains unchanged. This effect is particularly useful for overlays, image captions or navigation elements on photos.

HTML 

<div class="backdrop-dark">

    <div class="backdrop-dark__content">

       <span>CSS Backdrop</span>

        <h3>
            Dark background
        </h3>

        <p>
            The area behind this region
            is darkened.
        </p>

    </div>

</div>

CSS / SCSS 

.backdrop-dark {
    position: relative;

    min-height: 300px;

    display: flex;
    align-items: centre;
    justify-content: centre;

    padding: 40px;

    border-radius: 16px;

    overflow: hidden;

    background:
        url("/fileadmin/user_upload/backdrop-demo.jpg")
        center / cover
        no-repeat;

    &amp;__content {
        position: relative;
        z-index: 1;

        width: min(500px, 100%);

        padding: 35px;

        border-radius: 14px;

        background: rgba(15, 23, 42, 0.35);

        backdrop-filter: brightness(0.5);
        -webkit-backdrop-filter: brightness(0.5);

        colour: #fff;

        span {
            display: block;

            margin-bottom: 8px;

            font-size: 13px;
            font-weight: 700;

            text-transform: uppercase;
            letter-spacing: 0.08em;
        }

        h3 {
            margin: 0 0 12px;
        }

        p {
            margin: 0;

            colour: rgba(255, 255, 255, 0.75);
    }
    }
}

Conclusion: Designing modern interfaces using CSS background filters

CSS backdrop filters offer developers and designers a wealth of opportunities to enhance modern user interfaces with relatively little effort. Instead of resorting to complex graphics or additional JavaScript libraries, blur effects, brightness adjustments, colour changes or glass effects can be implemented directly using CSS. This results in interfaces that look professional whilst remaining high-performing.

Backdrop filters are particularly popular in the field of so-called glassmorphism design. Transparent cards, floating dialogue boxes or modern navigation bars can thus appear significantly more sophisticated. The background remains visible but is selectively altered so that important content stands out visually and readability is improved.

As well as visual effects, backdrop filters can also support user guidance. A darkened or blurred background automatically draws attention to an open modal, a notification or a form. This enhances the user experience, as visitors can intuitively recognise which element is currently in focus.

Despite all the design possibilities, backdrop filters should be used deliberately and sparingly. Effects that are too strong can impair readability or place an additional strain on processing power on older devices. Used correctly, however, backdrop filters are among the most effective tools in modern web design and enable impressive results with surprisingly little CSS code.

0 comments  
New comment

0 comments

Tag cloud