How to generate Random Gradients Automatically? Yes, you can with JavaScript Random Gradient Generator Program.
Previously I had shared random color generate in JavaScript, Today I am sharing a JavaScript automatic gradient generator program. Every time when you will click on generate gradient button in this program, there will appear a new gradient every time.
It is hard to create a perfect gradient combination for the first time. This program will help you in this matter, On a single button click there will generate a new gradient. The good thing in this program is its also show colors code. JavaScript random gradient generator to generate gradients automatically.
I created this javascript random gradient generator program using two JS libraries. First is jQuery and second in also a javascript library to create random colors. If you are a beginner then this will be the best JavaScript practice for you. If you thinking now how this program looks like, then there is preview given here below.
Preview Of Auto Generate Gradients Program
See this video preview for getting an idea of how this program looks.
Now you can see this program visually. If you like this, then go for the source code given below.
You May Also Like:
- Animated Search Box in JavaScript
- Encrypt and Decrypt Using JavaScript
- Contact Form With Flip Animation
- JavaScript Snake Game
JavaScript Random Gradient Generator Source Code
Before sharing source code, Let’s talk something about this program. I used jQuery and Random Color Js ( randomColor.min.js ) for creating this function. And I also used an external CSS library for little animating effect. This program creating every time a random gradient dynamically. You can say this is a kind of loop.
This program is with the fewer line of codes. I created 3 variables with the name a, b, and c and put their value randomColor(); Now we don’t have to use a loop for creating random colors. This JS library helps in that matter.
You have to create 3 files for this program. One for HTML, One for CSS, and one for JavaScript. & follow the steps for creating this program without any error.
index.html
Create an HTML file named ‘index.html‘ and put these codes given here below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<!DOCTYPE html> <!-- code by webdevtrick ( https://webdevtrick.com ) --> <html> <head> <meta charset="UTF-8"> <title>Random Gradient Generator | Webdevtrick.com</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/wingcss/0.1.4/wing.min.css"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="row"> <div class="col-3"></div> <div class="col-6"> <canvas id="gradient"></canvas> </div> </div> <div class="row"> <div class="col-12 text-center"> <button id="newGradient" >New Gradient</button> </div> </div> <div class="row"> <div class="col-12 text-center inarrow"> <span id="colorA">#0000ff</span> > <span id="colorB">#22bbdd</span><br> <span>Code By <a href="https://webdevtrick.com">WebDevTrick</a></span> </div> </div> <script src='https://cdnjs.cloudflare.com/ajax/libs/randomcolor/0.4.4/randomColor.min.js'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> <script src="function.js"></script> </body> </html> |
style.css
Now create a CSS file named ‘style.css’ and put these codes.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
/** code by webdevtrick ( https://webdevtrick.com ) **/ body { background-color: #6B6A6A; } #gradient { width:100%; background-image: linear-gradient( to right, blue, #2bd ); } #colorA, #colorB, .inarrow { font-size: 30pt; } a { text-decoration: none; font-weight: 800; color: aqua; } |
function.js
Now create a JS file named ‘function.js‘ & copy these codes paste on file.
|
1 2 3 4 5 6 7 8 9 10 11 |
/** code by webdevtrick ( https://webdevtrick.com ) **/ $("#newGradient").on("click",function(){ var a = randomColor(); var b = randomColor(); var c = randomColor(); $("#gradient").css("background-image"," linear-gradient(to right,"+ a +", " + b +")") $("#colorA").html(a).css("color",a); $("#colorB").html(b).css("color",b); $("#newGradient").css("background-color",c); }); |
That’s It. Now you have successfully created a JavaScript Random Gradient Generator program. If you have any doubt or question comment down below.
Thanks For Visiting, Keep Visiting.
Why use randomColor() when you can easily create rgb colors using Math.random(). Isn’t it gong to be more informative than using a predefined package.
Bro previously in a post I covered this topic here you can see – https://webdevtrick.com/random-color-generator-javascript/ I can’t share same code every time. Thanks for your comment.
I love you man, that’s what I’m telling him 😊. Math.random() with rgb will kill it.
Why don’t you think 🤔 about a way of doing it without a JS library… I’ve not done something like that buh I’ll do it without a library… Create problems for yourself to solve, that’s how you learn more, not by using solved problems… It’s not as if you’re on a rush to create it for a client? “Math.random()” will do that trick man.
Hey! thanks for your comment. Previously in a program called random color generator I had use this Math.random() command. I can’t post the same thing twice. check – https://webdevtrick.com/random-color-generator-javascript/
Hi I know nothing about coding, but I’d like to try and figure out how to get this cool program to work. What do I do with the files once I’ve made them? I’m on a mac and my text edit program forced me to save each file as .rtf
So far I figured out everything but linking the function.js file, since I get an error message saying that there is an “Uncaught Syntax Error: Invalid or unexpected token” and I haven’t been able to work out how to fix this and get the program to recognize the file.
Figured it all out, works great! Thanks!