You should know the basics of HTML, CSS and JavaScript.
How to create CSS Gradient background generator in JavaScript from scratch.
Follow these steps to build your own gradient generator using CSS linear gradient syntax.
Stuck at home, can’t go to events and can’t hang out with friends. I could gaze out of the window and wait, but then I found this platform called Zero To Mastery by Andrei Neagoie with lots of interesting stuff about Web Development. A community with more than a hundred thousand wannabe developers striving to acquire the latest and the best technologies on the market.
Create Color picker.
I started with creating a HTML file with elements such as header h1, h2, h3 and the script tag. Cool things that come with HTML and CSS are the input type “color” and the CSS linear gradient. Both syntaxes are essential to create a color picker. The input type “color” indicates the input to get a color picker and the CSS linear gradient to create the gradient where input is color. You need at least two color pickers to build the gradient function.
<input class=”color1" type=”color” name=”color1" value=”#00ff00"><input class=”color2" type=”color” name=”color2" value=”#ff0000">
Make gradient wheel interactive.
To make the background change and the gradient wheel interactive we need JavaScript. I created a new JavaScript file where I will call the function of the background gradient later on. I do this only because in the future I’ll be adding different functions to my application and want to be more extensible. But you can easily add the script in your HTML file for now.
By shuffling within the wheel, I change the background color and make the webpage more interactive. When the user finds his or her preferred blend, the particular CSS code can be copied and pasted. JavaScript can read from the DOM and can affect it. In our case, I want to be able to read the values (the colors) from both inputs.
var CSS = document.querySelector(“h3”);var color1 = document.querySelector(“.color1”);var color2 = document.querySelector(“.color2”);
Change the background color.
When the user changes the color in our color picker, I want to notice this and listen to the event every time the input value changes. This way I can detect it.
color1.addEventListener(“input”, function(){;console.log(color1.value);})color2.addEventListener(“input”, function(){;console.log(color2.value);})
While testing the console being updated, let’s get into action. Inspect the webpage in order to know which tag changes the background. In our case the background is in the body, so each time both colors change I grab the background tag. I add an id in the body of the HTML and keep testing if I’m actually selecting the body tag. Now when both inputs change, it fires up the linear gradient.
body.style.background = “linear-gradient(to right, “ color1.value + “, “ + color2.value + “)”; })
Create the function setGradient to park the background changing actions. Keep in mind to DRY repeat syntax when extracting the function. When shuffling in our color picker, I just need to add the particular values of the CSS format. As we select the gradients, this value is being updated.
function setGradient(){ body.style.background = “linear-gradient(to right, “ + color1.value + “,” + color2.value + “)”;css.textContent = body.style.background + “.”;}
Now you should be able to see the gradient background changing and the CSS code.
Don’t stop here.
You can add a style to make your own generator looking nice. For example add a special font style, add a random button which generates two random numbers for the colour inputs or even bootstrap the web page so it can adapt to your desktop and mobile devices. And if you stuck in one or another way there is probably someone who already found a solution for your coding problem, the internet is your solace.
Feel free to check my customised generator in Bootstrap where I followed above steps and add style and font in CSS here.
I look forward to doing more of that stuff in the next months.
