Radial Gradient is not working?

Hey guys,

I got a problem with my radial-gradient.
I am trying to add a classic radial-gradient background effect with CSS on my HTML body. The effect should be a sphere in the middle of the body, but for a reason I don’t get, the gradient is always displayed as linear.

My code:

body {
background: radial-gradient(circle, red, black);

Somebody can tell me, what I am doing wrong?

Hi Reggie

Try this:

body {
background: radial-gradient(circle at center 50%, red 30%, black 60%);

Then adjust to fit your preference.

Happy coding

Thanks @Teller,

this is going into the right direction, now I got two circles though.
i tried to play around with different %-values and screensizes, still 2 circles. Any other ideas?


body {
    background: radial-gradient(circle at center, red, black);

Try this pattern.

Thanks for you reply @hasanzaib1389 , but that wasn’t it.

I figured it out though. I had to set the height of the HTML to 100%. I don’t understand completely why, but this prevents the gradient from repeating.

html {
    height: 100%;
1 Like