body { background-color: } In this context, only one spelling of “color” will work; you can’t use “colour” here.

body { background-color: #d24dff; }

Header with Green Background

Paragraph with white background

html { min-height: 100%; } body { background: -webkit-linear-gradient(#93B874, #C9DCB9); background: -o-linear-gradient(#93B874, #C9DCB9); background: -moz-linear-gradient(#93B874, #C9DCB9); background: linear-gradient(#93B874, #C9DCB9); background-color: #93B874; } Different browsers have different implementations of the gradient function, so you’ll have to include several versions of the code.

html { min-height: 100%;} body { background: -webkit-linear-gradient(left, #93B874, #C9DCB9); background: -o-linear-gradient(right, #93B874, #C9DCB9); background: -moz-linear-gradient(right, #93B874, #C9DCB9); background: linear-gradient(to right, #93B874, #C9DCB9); background-color: #93B874; } You can play around with the “left” and “right” tags to experiment with different directions for your gradient.

For example, not only can you add more than two colors, you can also put a percentage after each one. This will allow you to set how much spacing you want each color segment to have. Here’s a sample gradient that uses this principle: background: linear-gradient(#93B874 10%, #C9DCB9 70%, #000000 90%);

background: linear-gradient(to right, rgba(147,184,116,0), rgba(147,184,116,1));

  -webkit-animation: colorchange 60s infinite;      animation: colorchange 60s infinite;   The top line of text is for Chromium-based browsers while the bottom line of text is for other browsers.

@-webkit-keyframes colorchange { 0% {background: #33FFF3;} 25% {background: #78281F;} 50% {background: #117A65;} 75% {background: #DC7633;} 100% {background: #9B59B6;} } @keyframes colorchange { 0% {background: #33FFF3;} 25% {background: #78281F;} 50% {background: #117A65;} 75% {background: #DC7633;} 100% {background: #9B59B6;} } Note that the two rules (@-webkit-keyframes and @keyframes have the same background colors and percentages. You’ll want these to stay uniform so the experience is the same on all browsers. The percentages (0%, 25%, etc) are of the total animation length (60s). When the page loads, the background will be the color set at 0% (#33FFF3). Once the animation has played for 25% of of 60 seconds, the background will turn to #7821F, and so on. You can modify the times and colors to fit your desired outcome.