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.
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
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.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.
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%);