how to make background color from bright blue to dark blue using css/html/js-CodePudding

im trying to make my website background start as a light blue background color and end up with slightly darker blue.

is there a way to code it? or should i put an image as the background(if no other option) ?

here is the image with the exact colors i want my background to have :

please ignore the clouds in the image, and check the colors only.

CodePudding user response：

Use a gradient

main {
  height: 100vh;
  background: linear-gradient(skyblue, darkblue);
}

<main></main>

CodePudding user response：

You should use linear-gradient

.background{
  width: 100vw;
  height: 100vh;
  background-image: linear-gradient(to bottom, cyan, blue);
}

<div >
</div>

CodePudding user response：

You could try linear-gradient. Click here for more information

See this for more information on which browsers support it: https://caniuse.com/?search=linear-gradient

Here's an example:

#grad1 {
  height: 200px;
  background-color: blue; /* For browsers that do not support gradients */
  background-image: linear-gradient(#0000FF, #000044);
}

<div id="grad1"></div>