Kevin Powell - Community•4w ago

Setting radial bg but the radial parts are stretching with the page height. Don't want that

I used this website to generate a background with little growing blobs on the edges but as I add content to the website the blobs get stretched. I want the glowing blobs to mainain their shape. Image 1 is how it was generated and image 2 is after I add content to the page.

.radial-bg {
    background-size: 100% 100%;
    background-position:
        0px 0px,
        0px 0px,
        0px 0px;
    background-image: radial-gradient(100% 100% at 167% 103%,
            #eff4f4ff 1%,
            #073aff00 100%),
        radial-gradient(75% 75% at -24% -22%, #af0712ff 0%, #000307ff 100%),
        linear-gradient(261deg, #0e0e0eff 100%, #0e0e0eff 100%);
}

.radial-bg {
    background-size: 100% 100%;
    background-position:
        0px 0px,
        0px 0px,
        0px 0px;
    background-image: radial-gradient(100% 100% at 167% 103%,
            #eff4f4ff 1%,
            #073aff00 100%),
        radial-gradient(75% 75% at -24% -22%, #af0712ff 0%, #000307ff 100%),
        linear-gradient(261deg, #0e0e0eff 100%, #0e0e0eff 100%);
}

You can check the 3rd image to see the aesthetic I'm going for.

ColorGradient

Color Gradient - The best CSS gradient generator. - ColorGradient

Looking for a gradient generator? Color gradient is a CSS gradient generator that is capable of creating simple and more complex gradients.

3 Replies

capt_uhu•4w ago

I only see 2 images attached to the post. So I'm not sure exactly what you're going for but I'm guessing that the default ellipse shape of radial-gradient might be causing your gradients to expand? Try something like radial-gradient(circle at top left, red, blue, green), Unless I'm missing it the generator you linked doesn't allow for this.

o_O•4w ago

my bad. the 3rd image that i wanted to link was this. Notice the glowing blobs in the background. that's what i am trying to replicate.

o_O•4w ago

And I figured out that because the generator uses percentage, the blobs change with the height of the body. So I used svh and vw which fixed the issue (i think... still needs to test a bit more) background: radial-gradient( 899px circle at 50% -80svh, #d61c3d 0%, #16191d 100%);

Gaming

Programming

Setting radial bg but the radial parts are stretching with the page height. Don't want that