Create your own Gradient Background Generator

Hi, I’m Sai Kumar, and I would like to talk about one of the projects that I made using HTML, CSS and JavaScript.

Gradient generator is capable of generating linear gradient images that can be used as background images in your design or as wallpaper images. You can easily configure the colors in the gradient and choose the direction and position of the gradient. A gradient background can bring in better aesthetics when designing a website, mockup or social media image. Using gradients in web design as well as graphic design has been a trend for a long time and would continue to be there.

How to use gradient backgrounds on a website?

To set gradient as background in the website you must use the CSS code provided by the tool.
For example, here is a sample CSS code for creating a linear gradient:

How to Create Gradient Background Generator?

HTML code: Save the code in a file as index.html. In the index.html file, we will use two inputs of type “color” to get the values of gradients.

CSS code: For CSS, we have done only some basic styling with some fonts and default background color. You can use the below stylesheet as a reference to create your custom styles by changing some fonts and colors.

JavaScript code: The first thing we have done is we have selected the two color nodes using document.querySelectorAll() method and we have selected h3 and body by using document.querySelector(). Now we create a arrow function to set a newly selected gradient as the background. In this function, we simply apply values which we get using document.querySelectorAll() to the background. We have used css.textcontent to assign the value of linear-gradient to the h3 tag.

You can see the project files in here: https://github.com/JaguSai/Gradient-Background-Generator

Thank You and Happy Coding.

May I humbly ask for a clap if you have enjoyed this piece?