As you can see in the screenshot, there are 2 background colors on my personal website that I'm creating to learn web designing/programming. But, instead of that sudden color change from the blueish color to white, I want to have a gradient color transition to the whiteish color. Is it possible? I mean, it's probably possible but I'm just a beginner therefore it seems too hard for me.

screenshot

CodePudding user response：

Try using linear-gradient.

MDN

CodePudding user response：

Yeah you can set the background image using a linear gradient, so something like this:

background-image: linear-gradient( rgba(0,212,255,1), rgba(255,255,255,1));

Here's an example:

.wrapper {
background-image: linear-gradient( rgba(0,212,255,1), rgba(255,255,255,1)); 
}

<div >
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Neque laoreet suspendisse interdum consectetur libero id faucibus. Laoreet suspendisse interdum consectetur libero id faucibus nisl tincidunt eget. Nunc sed augue lacus viverra vitae. Cras sed felis eget velit. Pellentesque habitant morbi tristique senectus et netus et. Pellentesque pulvinar pellentesque habitant morbi tristique. Volutpat est velit egestas dui id ornare arcu odio ut. Proin nibh nisl condimentum id venenatis a condimentum. Urna nunc id cursus metus aliquam.<br><br>

Elit pellentesque habitant morbi tristique. Dolor sed viverra ipsum nunc aliquet bibendum enim facilisis gravida. Rhoncus est pellentesque elit ullamcorper. Tellus rutrum tellus pellentesque eu tincidunt tortor aliquam. Pellentesque elit ullamcorper dignissim cras tincidunt. Consequat id porta nibh venenatis cras. Mauris vitae ultricies leo integer malesuada nunc vel risus. Consequat semper viverra nam libero. Amet venenatis urna cursus eget nunc. Integer quis auctor elit sed.<br><br>
</div>