CSS Frosted glass look without backdrop-filter but including radial-gradient

Question

Im trying to implement a design for Anki cards, I made in Figma, in CSS.

This site does a great job explaining how to accomplish the background blur without backdrop-filter (not supported in Anki). But so far I was not able to figure out how to add a radial-gradient over the background image before I blur it (to add a directional light effect).

The main Problem seems to be the fact that background: inherit; is used to align the background images. And I don't quite get how to align them without the inherit option.

So, is there a way to get the gradient "included" in the blur?

Here is the code from the tutorial (in case the link breaks). And this is the codepen .

body {
    background: url(https://images.unsplash.com/photo-1544306094-e2dcf9479da3) no-repeat;
    /* Keep the inherited background full size. */
    background-attachment: fixed; 
    background-size: cover;
    display: grid;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

.container {
    width: 30rem;
    height: 20rem;
    box-shadow: 0 0 1rem 0 rgba(0, 0, 0, .2);   
    border-radius: 5px;
    position: relative;
    z-index: 1;
    background: inherit;
    overflow: hidden;
}

.container:before {
    content: "";
    position: absolute;
    background: inherit;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    box-shadow: inset 0 0 2000px rgba(255, 255, 255, .5);
    filter: blur(10px);
    margin: -20px;
}

<div class="container"></div>

Answer 1

Use CSS variable to store the image and be able to add your gradient:

 body { --img: url(https://images.unsplash.com/photo-1544306094-e2dcf9479da3); background: var(--img) center/cover fixed no-repeat; display: grid; place-items:center; height: 120vh; }.container { width: 30rem; height: 20rem; box-shadow: 0 0 1rem 0 rgba(0, 0, 0, .2); border-radius: 5px; position: relative; z-index: 1; overflow: hidden; }.container:before { content: ""; position: absolute; background: radial-gradient(transparent, red), /* your background here */ var(--img) center/cover fixed no-repeat; z-index: -1; inset:0; box-shadow: inset 0 0 2000px rgba(255, 255, 255, .5); filter: blur(10px); margin: -20px; }

 <div class="container"></div>