使用scale时如何避免背景渐变超出div范围

我给背景设置了带模糊效果的径向渐变，未使用scale时渐变四周会出现白边。为解决这个问题我对渐变进行了缩放，效果良好但导致页面横向可滚动，背景超出页面范围。background-size和overflow属性均无效，想请教：

1. 如何在保留缩放效果的同时让渐变背景适配页面尺寸？
2. 若无法实现，如何不通过缩放消除渐变的白边？

相关代码 #

CSS 代码 #

.gradient{
    height: 75%;
    width: 100%;
    background: radial-gradient(62.61% 62.61% at 95.23% 6.02%, #160E71 0%, rgba(19, 13, 92, 0.26) 54.71%, rgba(90, 35, 248, 0) 100%), linear-gradient(72.48deg, #EF516D 2.61%, rgba(106, 103, 227, 0) 56.18%), radial-gradient(45.23% 45.23% at 35.11% -11.02%, #7936AE 0%, rgba(121, 54, 174, 0) 100%), radial-gradient(94.51% 124.88% at 94.32% 94.43%, rgba(65, 244, 255, 0.78) 0%, rgba(131, 218, 255, 0.6552) 32.29%, rgba(99, 175, 240, 0.3978) 64.06%, rgba(43, 90, 211, 0) 100%), linear-gradient(313.04deg, #341D65 0.93%, #604AEA 125.68%);
    background-blend-mode: normal, normal, normal, normal, normal, normal;
    filter: blur(100px);
    transform: scale(1.4);
    /* overflow: hidden; */
    /* background-size: cover; */
    background-clip: padding-box;
    z-index: 1;
    left: 0;
    right: 0;
    position: absolute;
}

.welcome-box {
    height: 75%;
    overflow: hidden;
}

HTML 代码 #

<div class="welcome-box">
        <div class="gradient"></div>
        
        <div class="welcome-box-content">
            <p class="welcome-subheader" style="font-style: italic">hi there,</p>
            <h1 class="welcome-header">I'm Mason Thomas!</h1>
            <p class="welcome-subheader">Connect with me!</p>
            <a href="https://github.com/Kandles11"><img src="assets/github.svg" alt="github logo" height="35" class="logo" /></a>
            <a href="https://www.linkedin.com/in/mason-thomas-ba1a891a1"><img src="assets/linkedin.svg" alt="linkedin logo" height="35" class="logo" /></a>
            <a href="mailto: mason@masongthomas.com"><img src="assets/email.svg" alt="email logo" height="35" class="logo" /></a>
            <a href="/resume/resume.pdf"><img src="assets/resume.svg" alt="resume logo" height="35" class="logo" /></a>
        </div>
    </div>

一、保留缩放效果同时避免页面滚动 #

问题核心是父容器overflow: hidden对绝对定位元素无效，因为父容器默认是静态定位，无法成为绝对定位元素的裁剪容器。修改步骤如下：

1. 给.welcome-box添加position: relative，让它成为子元素的定位参考容器，同时激活overflow: hidden的裁剪功能：

.welcome-box {
    height: 75%;
    overflow: hidden;
    position: relative; /* 新增 */
}

2. 给.gradient补充top: 0确保元素铺满父容器，同时显式设置缩放原点（默认就是中心，可选但更稳妥）：

.gradient{
    /* 原有代码 */
    transform: scale(1.4);
    transform-origin: center; /* 新增，确保从中心缩放 */
    top: 0; /* 新增，配合left/right让元素完全覆盖父容器 */
}

修改后父容器会裁剪掉缩放后超出的部分，页面不会出现横向滚动条，同时保留缩放消除白边的效果。

二、不通过缩放消除渐变白边 #

白边是因为模糊效果在元素边缘衰减为透明，和页面默认白色背景混合导致的，可通过以下两种方法解决：

方法1：扩大渐变元素尺寸，让模糊区域超出可视范围 #

给.gradient设置更大的宽高并偏移位置，让边缘模糊区域完全隐藏在页面外：

.gradient{
    height: calc(75% + 200px); /* 比原高度大200px，对应模糊半径的两倍 */
    width: calc(100% + 200px);
    left: -100px; /* 向左偏移100px，保持元素居中 */
    top: -100px; /* 向上偏移100px */
    transform: none; /* 移除缩放 */
}

数值可根据模糊半径（filter: blur(100px)）调整，一般设置为模糊半径的两倍，确保边缘模糊区域不会暴露在页面中。

方法2：给渐变元素添加匹配边缘的背景色 #

找到渐变最外层的深色（比如线性渐变起始色#341D65），设置为.gradient的背景色，这样边缘模糊的透明部分会和该颜色混合，不会显示白色：

.gradient{
    background-color: #341D65; /* 匹配渐变的起始深色 */
    /* 原有background渐变代码 */
    transform: none; /* 移除缩放 */
}

这种方法更简洁，需确保背景色和渐变边缘过渡自然，无明显色块断层。

内容的提问来源于stack exchange，提问作者Mason Thomas