Javascript CSS磨砂玻璃外观，无背景滤镜，但包含径向渐变

我正在尝试为Anki卡实现一个应用程序，我用Figma和CSS制作

该网站很好地解释了如何在没有背景滤镜的情况下实现背景模糊（Anki不支持）。但到目前为止，我还不知道如何在模糊背景图像之前在背景图像上添加径向渐变（以添加平行光效果）

主要问题似乎是

background:inherit用于对齐背景图像。如果没有继承选项，我不太明白如何对齐它们

那么，有没有办法让渐变“包含”在模糊中

以下是教程中的代码（以防链接中断）。这是最重要的

使用CSS变量存储图像，并能够添加渐变：


正文{
--img:url(https://images.unsplash.com/photo-1544306094-e2dcf9479da3);
背景：var（--img）中心/盖固定，无重复；
显示：网格；
放置项目：中心；
高度：120vh；
}
.集装箱{
宽度：30雷姆；
高度：20雷姆；
长方体阴影：0 0 1rem 0 rgba（0,0,0,2）；
边界半径：5px；
位置：相对位置；
z指数：1；
溢出：隐藏；
}
.货柜：在{
内容：“；
位置：绝对位置；
背景：
径向渐变（透明，红色），/*您的背景在这里*/
var（--img）中心/盖固定，无重复；
z指数：-1；
插图：0；
框阴影：插入0 0 2000px rgba（255、255、255、.5）；
过滤器：模糊（10px）；
利润率：-20px；
}
@Spectric谢谢！应该是固定的。（我希望如此）
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>