Why is this radial gradient coming out striped?

Question

Why does the radial gradient code found here: generated gradient

body {
    background: rgba(216,215,221,1);
    background: -moz-radial-gradient(center, ellipse cover, rgba(enter code here216,215,221,1) 0%, rgba(0,9,20,1) 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(216,215,221,1)), color-stop(100%, rgba(0,9,20,1)));
    background: -webkit-radial-gradient(center, ellipse cover, rgba(216,215,221,1) 0%, rgba(0,9,20,1) 100%);
    background: -o-radial-gradient(center, ellipse cover, rgba(216,215,221,1) 0%, rgba(0,9,20,1) 100%);
    background: -ms-radial-gradient(center, ellipse cover, rgba(216,215,221,1) 0%, rgba(0,9,20,1) 100%);
    background: radial-gradient(ellipse at center, rgba(216,215,221,1) 0%, rgba(0,9,20,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d8d7dd', endColorstr='#000914', GradientType=1 );
}

come out striped like seen here: codepen of generated gradient

Possible duplicate of [CSS3 gradient background set on body doesn't stretch but instead repeats?](https://stackoverflow.com/questions/2869212/css3-gradient-background-set-on-body-doesnt-stretch-but-instead-repeats) — isherwood, Jun 19 '17 at 19:30

score 3 · Answer 1 · answered Jun 19 '17 at 19:28

You get weirdness since the body element isn't full-height by default. This fixes it:

html, body {
  min-height: 100%;
}

body {
background: rgba(216,215,221,1);
background: -moz-radial-gradient(center, ellipse cover, rgba(216,215,221,1) 0%, rgba(0,9,20,1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(216,215,221,1)), color-stop(100%, rgba(0,9,20,1)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(216,215,221,1) 0%, rgba(0,9,20,1) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(216,215,221,1) 0%, rgba(0,9,20,1) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(216,215,221,1) 0%, rgba(0,9,20,1) 100%);
background: radial-gradient(ellipse at center, rgba(216,215,221,1) 0%, rgba(0,9,20,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d8d7dd', endColorstr='#000914', GradientType=1 );
}

You're welcome. Please use voting and acceptance rather than "thank you" comments. — isherwood, Jun 19 '17 at 20:06

score 0 · Answer 2 · answered Jun 19 '17 at 19:31

When you put "body" in front, it's acting like each line of text is where the gradient will start. Change "body" in your css to ".this" and then put that in a div class, you'll see the gradient.

.this {
    background: rgba(216,215,221,1);
    background: -moz-radial-gradient(center, ellipse cover, rgba(enter code here216,215,221,1) 0%, rgba(0,9,20,1) 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(216,215,221,1)), color-stop(100%, rgba(0,9,20,1)));
    background: -webkit-radial-gradient(center, ellipse cover, rgba(216,215,221,1) 0%, rgba(0,9,20,1) 100%);
    background: -o-radial-gradient(center, ellipse cover, rgba(216,215,221,1) 0%, rgba(0,9,20,1) 100%);
    background: -ms-radial-gradient(center, ellipse cover, rgba(216,215,221,1) 0%, rgba(0,9,20,1) 100%);
    background: radial-gradient(ellipse at center, rgba(216,215,221,1) 0%, rgba(0,9,20,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d8d7dd', endColorstr='#000914', GradientType=1 );
}

<div class="this">hkhkj<br>hkhkj<br>hkhkj<br>hkhkj<br>hkhkj<br>hkhkj<br>hkhkj<br>hkhkj<br>hkhkj<br>hkhkj<br>hkhkj<br>hkhkj<br>hkhkj<br>hkhkj<br>hkhkj<br>hkhkj<br>hkhkj<br>hkhkj<br>hkhkj<br>
</div>

This makes sense, thanks for your help – bignore59 Jun 19 '17 at 19:40 — bignore59, Jun 19 '17 at 19:40

Why is this radial gradient coming out striped?

2 Answers2