How to prevent background-gradient from extending past the div when using scale-CodePudding

Currently, I have a radial-gradient as my background with a blur effect. Without a scale effect, it has white edges around the entire gradient. To combat this, I scaled the entire gradient, which works great, except for the fact it extends the page to the right, and allows the user to scroll left and right.

Here is the relevant code:

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

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


        </div>
    </div>

neither the background-size or overflow attribute have an effect.

How can I make the gradient background fit the size of the page with the scaled effect? If this is not possible, how can I remove the white edges of the gradient background without the scaling effect? Thank you!

Here is a video of the problem: https://imgur.com/O9OahhC

CodePudding user response：

Setting the width of .gradient to 100% will use its parent element as the total width and make .gradient the full width of its parent. Try updating the width to 100vw (viewport width). This will allow the gradient to be the width of the visible screen.

CodePudding user response：

To fix this, the solution ended up changing the position of the parent div.

By changing the parent div to position: relative, the overflow: hidden property starting working, so my problem was solved.