How can I include a gradient instead of a simple color only?

Question

I tried to make my background color change on click by putting some code on my HTML. I found the piece of code below on this forum. It works perfectly with a simple color like 'green' but I don't know how to include a gradient.

Can someone help me out please?

HTML
<div class="contain" role="main">
<nav class="menu-nav" role="navigation">
<li class="H01"onclick="document.body.style.backgroundColor = 'green';">01:00</li>
<li class="H02"onclick="document.body.style.backgroundColor = 'yellow';">02:00</li>
</nav>
</div>

CSS
body {   
background-color: blue; 
}

Possible duplicate of [CSS3 Transparency + Gradient](https://stackoverflow.com/questions/2293910/css3-transparency-gradient) — Code Maniac, Jun 02 '19 at 12:19

score 0 · Answer 1 · answered Jun 02 '19 at 20:17

There is a more complicated syntax for that which would be like below:

-webkit-gradient(linear, left top, left bottom, from(green),to(yellow))

And to use this gradient you should modify the backgroundImage field instead of the backgroundColor

So your code would become like this:

<li class="H01"onclick="document.body.style.backgroundImage = '-webkit-gradient(linear, left top, left bottom, from(green),   to(yellow))';">01:00</li>

How can I include a gradient instead of a simple color only?

1 Answers1