JavaScript Gradient Background Generator

YvonneDev
2 min readMay 3, 2019

GitHub

As you know, the way to add linear gradient is linear-gradient(). Here I got three thoughts about changing the colors: pick a color, random two colors and autoplay random function, and stop when clicking the button.

First, link the stylesheet in the head and script file in the body.

HTML

htmlAssign each button an id name.
Two color picker is input typed color.

CSS

the background of the body is a linear gradient with red and yellow default settings.

JS

Select all the elements that would be involved.

setGradient() — -change two picked color value in style background,and show the html in the h3 tag.

randomColor() — -get a random color.

‘#’ + (Math.random() * 0xFFFFFF << 0).toString(16)

--

--

YvonneDev

❤️Front-end Web Development self-taught *share what I learned*