How to Make a Gradient Background in CSS

Making gradient background fill page with css

To have the gradient fill the viewport, give the <html> element a height of 100%: fiddle

html {
    height: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background: #70bg32;
    background-repeat:no-repeat;
    background: -webkit-linear-gradient( to left top, blue, red);
    background: -moz-linear-gradient( to left top, blue, red);
    background: -ms-linear-gradient( to left top, blue, red);
    background: -o-linear-gradient( to left top, blue, red);
    background: linear-gradient( to left top, blue, red);
}

To prevent the gradient from repeating past the visible section of the viewport (assuming there was a scrollbar), replace height: 100%; with min-height: 100%;.

html {

    height: 100%;

    -webkit-background-size: cover;

    -moz-background-size: cover;

    -o-background-size: cover;

    background-size: cover;

    background: #70bg32;

    background-repeat:no-repeat;

    background: -webkit-linear-gradient( to left top, blue, red);

    background: -moz-linear-gradient( to left top, blue, red);

    background: -ms-linear-gradient( to left top, blue, red);

    background: -o-linear-gradient( to left top, blue, red);

    background: linear-gradient( to left top, blue, red);

}

How do I combine a background-image and CSS3 gradient on the same element?

Multiple backgrounds!

body {

  background: #eb01a5;

  background-image: url("IMAGE_URL"); /* fallback */

  background-image: url("IMAGE_URL"), linear-gradient(#eb01a5, #d13531); /* W3C */

}

How do you make a gradient background in css?

Use this in your CSS:

background-image: -o-linear-gradient(bottom, rgb(254,133,107) 24%, rgb(35,171,17) 62%);
background-image: -moz-linear-gradient(bottom, rgb(254,133,107) 24%, rgb(35,171,17) 62%);
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.24, rgb(254,133,107)), color-stop(0.62, rgb(35,171,17)));
background-image: -webkit-linear-gradient(bottom, rgb(254,133,107) 24%, rgb(35,171,17) 62%);
background-image: -ms-linear-gradient(bottom, rgb(254,133,107) 24%, rgb(35,171,17) 62%);
/* This last line is all you need for modern browsers */
background-image: linear-gradient(bottom, rgb(254,133,107) 24%, rgb(35,171,17) 62%);

How can I create a smooth gradient background Animation?

Try this

    div {

        text-align: center;

        width: 100px;

     height: 90px;

     color: #fff;

     background: linear-gradient(0deg, red, yellow, green);

     background-size: 400% 400%;

     -webkit-animation: Gradient 15s ease infinite;

     -moz-animation: Gradient 15s ease infinite;

     animation: Gradient 15s ease infinite;

        }

       @-webkit-keyframes Gradient {

     0% {

      background-position: 50% 0%

     }

     50% {

      background-position: 50% 100%

     }

     100% {

      background-position: 50% 0%

     }

    }

    @-moz-keyframes Gradient {

     0% {

      background-position: 50% 0%

     }

     50% {

      background-position: 50% 100%

     }

     100% {

      background-position: 50% 0%

     }

    }

    @keyframes Gradient {

     0% {

      background-position: 50% 0%

     }

     50% {

      background-position: 50% 100%

     }

     100% {

      background-position: 50% 0%

     }

    }

<div> Text </div>

Gradient not working when there's a background color

If you define a gradient as a background-image and a background-color for the same element, only one of them will be displayed if they both cover the complete element (which they do as long as no clipping is added, and if it's added, both are clipped).

For an additional background color you need to add an additional parent element that gets that background color:

(note after edit of question snippet: also the * selector applies to the #maintitle element in your snippet, so although there are two CSS rules, the background-image and background-color settings in them apply to the same element, for which the above also applies: the background-color overwrites the background-imge/gradient)

#maintitle {
  background-image: linear-gradient(90deg, red, blue);
  background-clip: text;
  color: transparent;
  display: inline-block;
}
.wrapper {
   background-color: green;
}

<div class="wrapper">
  <div class="title" id="maintitle">
    <h1>
      Welcome!
    </h1>
  </div>
</div>

Can't apply background gradient

Gradients belong to the image data type, they can only be used where images can be used. For this reason, linear-gradient property won't work on background-color property and other properties that use the color data type.

The correct declaration will be

CSS

body {
background: linear-gradient(120deg, #FF0000 0%, #0000FF 100%);
}

Source: https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient