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

Question

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.

Answer 1

Use a gradient

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

 <main></main>

Answer 2

You should use linear-gradient

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

 <div class="background"> </div>

Answer 3

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>