Learners, In this article we are going to design a very interactive and impressive project which is a Random Gradient Generator with detailed functionality.

Learners, How many of you always love to mix up two three-color to work with them, and always spent minutes to find a perfect color pallet then they work. It’s fun isn’t it I always used to do that same whenever you at the role of designer these things are the main indigent and doing this stuff always generates curiosity in you. Oh, leave these all stuff. I’m discussing this with you all because you also know its time consuming so I have an alternate solution in this project.

Create Random Gradient Generator Using JavaScript & CSS

In this Blog, we will design a Random Gradient Generator .

Hey learners!!

Welcome to our today’s blog with code with random. In this blog, we gonna learn how we can design a Random Gradient Generator project Using HTML CSS JAVASCRIPT.

I hope you must have got an idea about the project.

Let’s have a look at our project.

As you are looking in the project preview how the thing is organized in the single display.
Following is the feature of our project:-

1. Like if you are able to observe the first attached image there we have two colors in the single display within a certain ratio.
2. IN the middle of the display we have two buttons for the random generator and a copy button.
3. If you don’t want the current background just refresh it with a random generator.
4. Like the attached image.

HTML SECTION For Random Gradient Generator

Here I’m not going to add a structure of the HTML file from scratch, I will just paste the body part, it is so because the body is the main part of our designing a browser.

We have the following part in the HTML section.
We have two buttons for basic functionality and a textarea that will preview color.
Go through the below code and run it in your IDE or where you used to design just HTML without CSS styling.

<div>
  <button class="random">Random Gradient</button>
  <button class="copy">Copy</button>
  <textarea></textarea>
</div>

CSS SECTION For Random Gradient Generator

By CSS we will design our container and will bring in the center and then we will design both buttons and will also set the fixed width of the background preview.

The Below code will analyze you more. So just add in your HTML half complete file and wait to watch some magic.

 body {
height: 100vh;
display: flex;
overflow: hidden;
flex-direction: column;
width: 100%;
align-items: center;
justify-content: center;
}
button {
color: #fff;
border: 2px solid #fff;
padding: 6px 12px;
margin: 0 4px;
outline: 0;
border-radius: 4px;
}
button:hover {
background-color: #fff;
color: rgba(0,0,0,.6);
}
button:focus {
outline: 0;
}
textarea {
opacity: 0;
position: absolute;
top: -9999999px;
left: -9999999px;
}

Javascript section For Random Gradient Generator

In the Javascript part, we will add magic logic as initially when our page will be loaded then it will preview with a gradient background and with two buttons you can refer from the first attached button, and for functionality, for refreshing the color will add this javascript file.

Portfolio Website Using HTML CSS And JAVASCRIPT ( Source Code)

For observing this magic for this project then you should add the js file with the rest of the HTML and CSS file and enjoy this project and deploy it on Github.

const randomButton = document.querySelector(".random");
const copyButton = document.querySelector(".copy");
const textarea = document.querySelector("textarea");
let style = "";
const blendModes = [
"normal",
"multiply",
"screen",
"overlay",
"lighten",
"hard-light",
"soft-light",
"hue",
"color"
];
function generateGradient() {
let gradient = "",
mode = "";
for (let i = 0; i < 4; i++) {
const deg = Math.floor(Math.random() * 180);
const firstColor = randomColor({
luminosity: "bright",
hue: "blue",
format: "rgba"
});
const lastColor = randomColor({
luminosity: "light",
hue: "red",
format: "rgba",
alpha: 0.5
});
const firstSpread = Math.floor(Math.random() * 90);
const lastSpread = Math.floor(Math.random() * 180);
mode += `${blendModes[Math.floor(Math.random() * blendModes.length)]},`;
gradient += `linear-gradient(${deg}deg, ${firstColor} ${firstSpread}%, ${lastColor} ${lastSpread}%),`;
}
style = `background-image: ${gradient.slice(0,-1)}; background-blend-mode: ${mode.slice(0, -1)};`
document.body.setAttribute("style", style);
}
generateGradient();
randomButton.addEventListener("click", generateGradient);
copyButton.addEventListener("click", () => {
textarea.value = style;
document.execCommand('copy', textarea.select());
copyButton.innerText = 'Copied';
setTimeout(() => {
copyButton.innerText = 'Copy';
}, 400);
});

Final Output Of Random Gradient Generator

By this blog… We have learned how we can design a Random Gradient Generator Project HTML CSS JAVASCRIPT.

Now I’m looking for your reviews.
So, How was the blog , Learners!

If you want a more crisp blog like this then please check our Blogs sites CodewithRandom. keep tuned with us because every day you will learn something new here.

I hope that I’m able to make you understand this topic and that you have learned something new from this blog. If you faced any difficulty feel free to drop a comment down your problems and if you liked it, please show your love in the comment section. This fills bloggers’ hearts with enthusiasm for writing more new blogs.

You Can Follow Me On Instagram 

Written By @ankit Kumar

Code By @knyttneve