New to Telerik UI for Blazor? Download free 30-day trial

Apply a Backdrop Filter with a Blur Effect to the Modal Window Background


Product Window for Blazor


This knowledge base article answers the following questions:

  • How do I blur the background in a Modal Window component?
  • Is it possible to apply a backdrop filter with a blur effect on the background content of the Window?


To adjust the blur amount, override the built-in CSS styles of the background. Use the code below to achieve the desired results.

This code will affect all modal Dialogs and Windows on the web page.

    div.k-overlay {
        /* prerequisites to make the blurring work with this CSS class */
        opacity: 1;
        background-color: transparent;
        /* blurring itself */
        -webkit-backdrop-filter: blur(4px); /* Safari */
        backdrop-filter: blur(4px);

<TelerikWindow @bind-Visible="@WindowIsVisible"
        Product Details
        <div class="p-4">
            <h2>Product Name: Widget X</h2>
            <p>Description: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac odio velit. Integer vel turpis vestibulum, tincidunt lacus at, rutrum sapien.</p>
            <p>Price: $49.99</p>
            <p>Availability: In Stock</p>
        <WindowAction Name="Close" />

<TelerikButton OnClick="@( () => WindowIsVisible = !WindowIsVisible )">Show Product Details</TelerikButton>

@code {
    private bool WindowIsVisible { get; set; }
In this article