Zurück

CSS Backdrop: Moderne Effekte mit backdrop-filter umsetzen

Avatar of Andre Lanius Andre Lanius - 17. September 2026 - CSS / SCSS - 4 minute read
CSS Backdrop Filter

Mit CSS Backdrop lassen sich moderne und visuell ansprechende Effekte direkt mit CSS umsetzen. Besonders interessant ist dabei die Eigenschaft backdrop-filter, mit der sich der Bereich hinter einem Element beispielsweise weichzeichnen, aufhellen oder farblich verändern lässt. Dadurch entstehen Effekte, die man heute häufig bei modernen Websites, Navigationen, Overlays und Benutzeroberflächen findet.

Ein bekanntes Beispiel ist Glassmorphism. Transparente Flächen, ein dezenter Hintergrund-Blur und halbtransparente Farben erzeugen dabei den Eindruck von Glas. Der Vorteil: Für viele dieser Effekte werden weder Bilder noch JavaScript oder zusätzliche Bibliotheken benötigt. Mit wenigen CSS-Eigenschaften lässt sich ein moderner Look direkt im Browser realisieren.

In diesem Artikel schauen wir uns verschiedene Möglichkeiten von CSS Backdrop genauer an. Neben einem einfachen Einstieg mit backdrop-filter: blur() geht es auch um Transparenz, Farbtöne, Schatten und Kombinationen mehrerer CSS-Eigenschaften. Die Beispiele zeigen dabei, wie sich die Effekte in der Praxis für Navigationen, Karten, Overlays oder andere Elemente einer Website einsetzen lassen.

Dabei lohnt sich auch ein Blick auf die Browserunterstützung und die Unterschiede zwischen filter und backdrop-filter. Während filter das Element selbst verändert, wirkt backdrop-filter auf den sichtbaren Bereich hinter dem Element. Genau dieser Unterschied macht CSS Backdrop besonders interessant für moderne Webdesigns und sorgt für viele kreative Einsatzmöglichkeiten.

Beispiel 1: CSS Backdrop Blur

Mit backdrop-filter: blur() lässt sich der Bereich hinter einem Element weichzeichnen. Damit der Effekt sichtbar wird, benötigt das Element einen teilweise transparenten Hintergrund. Besonders gut eignet sich diese Technik für Overlays, Navigationen oder halbtransparente Karten.

HTML 

<div class="backdrop-blur">
    <div class="backdrop-blur__content">
        <h3>CSS Backdrop Blur</h3>
        <p>
            Der Hintergrund hinter diesem Element
            wird weichgezeichnet.
        </p>
    </div>
</div>

CSS / SCSS 

.backdrop-blur {
    position: relative;

    padding: 40px;

    border-radius: 16px;

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

    overflow: hidden;

    &::before {
        content: "";

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

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

        border-radius: 50%;

        background: #fff;
    }

    &__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);

        color: #fff;
    }

    h3 {
        margin: 0 0 10px;
    }

    p {
        margin: 0;
    }
}

Beispiel 2: Glassmorphism mit CSS Backdrop

Glassmorphism ist ein beliebter Einsatzbereich für CSS Backdrop. Eine halbtransparente Fläche wird mit einem Blur-Effekt kombiniert. Dadurch wirkt das Element wie eine Glasscheibe, durch die der dahinterliegende Inhalt noch sichtbar bleibt.

HTML 

<div class="glass-card">

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

    <h3>Glassmorphism</h3>

    <p>
        Eine transparente Oberfläche mit
        einem weichen Hintergrund-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);

    color: #fff;

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

        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);
    }
}

Beispiel 3: Hintergrund mit brightness() abdunkeln

Mit backdrop-filter: brightness() lässt sich die Helligkeit des Bereichs hinter einem Element verändern. Der eigentliche Inhalt des Elements bleibt dabei unverändert. Besonders praktisch ist dieser Effekt bei Overlays, Bildbeschriftungen oder Navigationen auf Fotos.

HTML 

<div class="backdrop-dark">

    <div class="backdrop-dark__content">

        <span>CSS Backdrop</span>

        <h3>
            Dunkler Hintergrund
        </h3>

        <p>
            Der Bereich hinter dieser Fläche
            wird abgedunkelt.
        </p>

    </div>

</div>

CSS / SCSS 

.backdrop-dark {
    position: relative;

    min-height: 300px;

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

    padding: 40px;

    border-radius: 16px;

    overflow: hidden;

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

    &__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);

        color: #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;

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

Fazit: Moderne Oberflächen mit CSS Backdrop-Filtern gestalten

CSS Backdrop-Filter eröffnen Entwicklern und Designern zahlreiche Möglichkeiten, moderne Benutzeroberflächen mit vergleichsweise wenig Aufwand aufzuwerten. Statt auf komplexe Grafiken oder zusätzliche JavaScript-Bibliotheken zurückzugreifen, lassen sich Unschärfen, Helligkeitsanpassungen, Farbveränderungen oder Glaseffekte direkt mit CSS umsetzen. Dadurch entstehen Oberflächen, die professionell wirken und gleichzeitig performant bleiben.

Besonders beliebt sind Backdrop-Filter im Bereich des sogenannten Glassmorphism-Designs. Transparente Karten, schwebende Dialogfenster oder moderne Navigationsleisten können dadurch deutlich hochwertiger wirken. Der Hintergrund bleibt sichtbar, wird jedoch gezielt verändert, sodass sich wichtige Inhalte optisch hervorheben und die Lesbarkeit verbessert wird.

Neben visuellen Effekten können Backdrop-Filter auch die Benutzerführung unterstützen. Ein abgedunkelter oder unscharfer Hintergrund lenkt die Aufmerksamkeit automatisch auf ein geöffnetes Modal, eine Benachrichtigung oder ein Formular. Dadurch verbessert sich die User Experience, da Besucher intuitiv erkennen, welches Element aktuell im Fokus steht.

Trotz aller Gestaltungsmöglichkeiten sollten Backdrop-Filter bewusst und sparsam eingesetzt werden. Zu starke Effekte können die Lesbarkeit beeinträchtigen oder auf älteren Geräten zusätzliche Rechenleistung beanspruchen. Richtig eingesetzt gehören Backdrop-Filter jedoch zu den wirkungsvollsten Werkzeugen moderner Webgestaltung und ermöglichen beeindruckende Ergebnisse mit erstaunlich wenig CSS-Code.

0 comments  
New comment

0 comments