{"id":205,"date":"2021-10-08T01:27:00","date_gmt":"2021-10-08T01:27:00","guid":{"rendered":"https:\/\/foolishdeveloper.com\/index.php\/2021\/10\/08\/random-gradient-generator-with-javascript-css\/"},"modified":"2023-01-05T11:19:57","modified_gmt":"2023-01-05T11:19:57","slug":"random-gradient-generator-with-javascript-css","status":"publish","type":"post","link":"https:\/\/foolishdeveloper.com\/random-gradient-generator-with-javascript-css\/","title":{"rendered":"Random Gradient Generator with JavaScript &#038; CSS"},"content":{"rendered":"<style>\n  p{font-size:18.5px;<br \/>\n    color: #292828;<br \/>\n  font-family: sans-serif;<\/p>\n<p>    display: block;<br \/>\n    margin-block-start: 1em;<br \/>\n    margin-block-end: 1em;<br \/>\n    margin-inline-start: 0px;<br \/>\n    margin-inline-end: 0px;<br \/>\n    word-wrap: break-word;<\/p>\n<p>  line-height: 2em;}<\/p>\n<p>  h3{text-align: left;<br \/>\n    font-family: Open Sans,Arial,sans-serif;<br \/>\n    line-height: 1.7em;<br \/>\n    color:black;<br \/>\n    color:#333131;<br \/>\n    font-weight: 520;<\/p>\n<p>    -webkit-font-smoothing: antialiased;<br \/>\n    }<\/p>\n<p>   h2{text-align: left;<br \/>\n    font-family: Open Sans,Arial,sans-serif;<br \/>\n    line-height: 1.7em;<br \/>\n    color:black;<\/p>\n<p>    font-weight: 620;<br \/>\n    -webkit-font-smoothing: antialiased;<br \/>\n    }<\/p>\n<p>.class {<br \/>\n background:#edf0f2;<br \/>\n font-family: Consolas,Monaco,Lucida Console,monospace;<br \/>\n line-height: 1.65;<br \/>\n word-wrap: break-word;<br \/>\n border-radius: 5px;<br \/>\n color:#001d8f;<br \/>\n font-size:17.1px;<br \/>\n padding-left:10px;<br \/>\n white-space: pre-wrap;}<\/p>\n<p>    button.last-btn{<br \/>\n  padding:14px 29px;<br \/>\n    font-size:17px;<br \/>\n    background-color:#0e87f0;<br \/>\n    border-radius:6px;<br \/>\n    color:white;<br \/>\n      font-family: Open Sans,Arial,sans-serif;<br \/>\n      border:none;<br \/>\n    margin-left:35%;<\/p>\n<p>  }<\/p>\n<p> @media only screen and (max-width: 400px) {<br \/>\n  button.last-btn{<br \/>\n  margin-left:0px;<br \/>\n  margin-right:0px;<br \/>\n  }<br \/>\n}<br \/>\n    @media only screen and (max-width: 300px) {<br \/>\n    button.last-btn{<br \/>\n  margin-left:0px;<br \/>\n  margin-right:0px;<br \/>\n  }<br \/>\n}<br \/>\n    @media only screen and (max-width: 600px) {<br \/>\n    button.last-btn{<br \/>\n  margin-left:0px;<br \/>\n  margin-right:0px;<br \/>\n  }<br \/>\n}<br \/>\n    @media only screen and (max-width: 800px) {<br \/>\n    button.last-btn{<br \/>\n  margin-left:0px;<br \/>\n  margin-right:0px;<br \/>\n  }<br \/>\n}<\/p>\n<p>      @media only screen and (max-width: 400px) {<br \/>\n  .copyButton {<br \/>\n     width: 45%;<br \/>\n  }<\/p>\n<\/style>\n<p style=\"text-align: left;\">\nIn this article, you will learn how to build a <b>Random Gradient Generator using JavaScript<\/b>, HTML, and CSS. CSS Gradient Generator is basically a <a href=\"https:\/\/foolishdeveloper.com\/search\/label\/javascript\" target=\"_blank\" rel=\"noopener\">simple JavaScript project <\/a>that will increase the knowledge of beginners about JavaScript.<\/p>\n<p style=\"text-align: left;\"><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/gradient\/linear-gradient()\" target=\"_blank\" rel=\"noopener\">inear-gradient<\/a> is mainly used in the background of web pages. If you know basic JavaScript, you can easily create this project.<\/p>\n<div class=\"separator\" style=\"clear: both;\"><a href=\"https:\/\/blogger.googleusercontent.com\/img\/a\/AVvXsEg-v1mxSa0lsBNf5pogH9lmSOyFHv6QEtE0R99YEXdmJUnPAMRfxbRdWMR-rtC3nZSXfRoG3JQzjmhmuGxa120rWhP2pqbOk6w9AqLMoBqUJu1MG1aI9xpVjLcfVfhLCG6t_6VKvxhQru0N3fMfrUwX4CO0QvE4wPHLaEk1XkZhyaA3Rz6AJcZrOczOpw\" style=\"display: block; padding: 1em 0px; text-align: center;\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" alt=\"Random Gradient Generator with JavaScript &amp; CSS\" border=\"0\" data-original-height=\"720\" data-original-width=\"1280\" src=\"https:\/\/blogger.googleusercontent.com\/img\/a\/AVvXsEg-v1mxSa0lsBNf5pogH9lmSOyFHv6QEtE0R99YEXdmJUnPAMRfxbRdWMR-rtC3nZSXfRoG3JQzjmhmuGxa120rWhP2pqbOk6w9AqLMoBqUJu1MG1aI9xpVjLcfVfhLCG6t_6VKvxhQru0N3fMfrUwX4CO0QvE4wPHLaEk1XkZhyaA3Rz6AJcZrOczOpw=s16000\" title=\"JavaScript Random Gradient Generator is a great project. This article will show you how to make Random CSS Gradient Generator using JavaScript.\"><\/a><\/div>\n<p style=\"text-align: left;\">&nbsp;Creating a perfect gradient is much more problematic and time-consuming. However, using this design you can generate the color of your choice in seconds with just one click.<\/p>\n<p style=\"text-align: left;\">Here gradient combinations can be seen from different angles. The most important point in this project is that I only used JavaScript here, not any external library.<\/p>\n<p style=\"text-align: left;\">\n<h2 style=\"font-size: 28px; text-align: left;\">Random Gradient Generator with JavaScript<\/h2>\n<p style=\"text-align: left;\">Now it is time to follow this tutorial to create this <b>javascript linear-gradient generator<\/b>. Even if you are a beginner, you can understand this design.<\/p>\n<p style=\"text-align: left;\">&nbsp;First I designed the webpage then I made a small box on that page. There is a display in the box where the colors can be seen. Below that is a small box that will contain the color code. Below all are two buttons, one for generating colors and the other for copying color codes.<\/p>\n<p class=\"codepen\" data-height=\"375\" data-theme-id=\"light\" data-default-tab=\"result\" data-slug-hash=\"wveLOqE\" data-preview=\"true\" data-user=\"fghty\" style=\"height: 375px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/fghty\/pen\/wveLOqE\" target=\"_blank\" rel=\"noopener\"><br \/>\njavascript Random Gradient Generator<\/a> by Foolish Developer (<a href=\"https:\/\/codepen.io\/fghty\" target=\"_blank\" rel=\"noopener\">@fghty<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.<\/span><\/p>\n<p><script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<div><\/div>\n<h3 style=\"font-size: 25px; text-align: left;\"><span style=\"color: #800180;\">Step 1:<\/span>&nbsp;Create the basic structure of the Gradient Generator<\/h3>\n<p style=\"text-align: left;\">\n<p>I have created the basic structure of this CSS gradient color generator using the following HTML and CSS code. I used the width of the design 410px and the background color is white. To enhance its beauty, we have created shadows all around using <u>box-shadow<\/u>.<\/p>\n<div class=\"class\">\n<div class=\"class\">&lt;div class=&#8221;wrapper&#8221;&gt;<\/div>\n<div class=\"class\">&nbsp;<\/div>\n<div class=\"class\">&lt;\/div&gt;<\/div>\n<\/div>\n<div class=\"class\">\n<div class=\"class\">\n<div class=\"class\">*{<\/div>\n<div class=\"class\">&nbsp; &nbsp; padding: 0;<\/div>\n<div class=\"class\">&nbsp; &nbsp; margin: 0;<\/div>\n<div class=\"class\">&nbsp; &nbsp; box-sizing: border-box;<\/div>\n<div class=\"class\">&nbsp; &nbsp; border: none;<\/div>\n<div class=\"class\">&nbsp; &nbsp; outline: none;<\/div>\n<div class=\"class\">&nbsp; &nbsp; font-family: &#8220;Poppins&#8221;,sans-serif;<\/div>\n<div class=\"class\">}<\/div>\n<div class=\"class\"><\/div>\n<div class=\"class\">body{<\/div>\n<div class=\"class\">&nbsp; &nbsp; height: 100vh;<\/div>\n<div class=\"class\">&nbsp; &nbsp; background: #448aff;<\/div>\n<div class=\"class\">}<\/div>\n<\/div>\n<div class=\"class\"><\/div>\n<div class=\"class\">.wrapper{<\/div>\n<div class=\"class\">&nbsp; &nbsp; width: 410px;<\/div>\n<div class=\"class\">&nbsp; &nbsp; background-color: #ffffff;<\/div>\n<div class=\"class\">&nbsp; &nbsp; padding: 30px 30px;<\/div>\n<div class=\"class\">&nbsp; &nbsp; border-radius: 8px;<\/div>\n<div class=\"class\">&nbsp; &nbsp; position: absolute;<\/div>\n<div class=\"class\">&nbsp; &nbsp; transform: translate(-50%,-50%);<\/div>\n<div class=\"class\">&nbsp; &nbsp; left: 50%;<\/div>\n<div class=\"class\">&nbsp; &nbsp; top: 50%;<\/div>\n<div class=\"class\">&nbsp; &nbsp; box-shadow: 0 20px 25px rgba(60,60,100,0.15);<\/div>\n<div class=\"class\">}<\/div>\n<\/div>\n<div class=\"separator\" style=\"clear: both;\"><a href=\"https:\/\/blogger.googleusercontent.com\/img\/a\/AVvXsEgt5Swn-KjPuKsktU03CCRGxlLlreiqMPtT5uv6RJYoP39TZqGNLoRRICg7g1Dgy8cvCOdDkL9gFPpzBUGLvyHKSFoArVCPoxeLzGdzgQ9zCPrhWJlAfRMFHiifZVhj74tOd337piad2h1L3skd2VO037gjy7w90K3ydD4VBSgV7HOEnI94QWZC7oyVnw\" style=\"display: block; padding: 1em 0px; text-align: center;\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" alt=\"Create the basic structure of the Gradient Generator\" border=\"0\" data-original-height=\"488\" data-original-width=\"1280\" src=\"https:\/\/blogger.googleusercontent.com\/img\/a\/AVvXsEgt5Swn-KjPuKsktU03CCRGxlLlreiqMPtT5uv6RJYoP39TZqGNLoRRICg7g1Dgy8cvCOdDkL9gFPpzBUGLvyHKSFoArVCPoxeLzGdzgQ9zCPrhWJlAfRMFHiifZVhj74tOd337piad2h1L3skd2VO037gjy7w90K3ydD4VBSgV7HOEnI94QWZC7oyVnw=s16000\" title=\"I have created the basic structure of this CSS gradient color generator using the following HTML and CSS code.\"><\/a><\/div>\n<h3 style=\"font-size: 25px; text-align: left;\"><span style=\"color: #800180;\">Step 2:<\/span>&nbsp;Add a title in the box<\/h3>\n<p style=\"text-align: left;\">Now I have added a title above all in this design. I added titles using h2 tags to use titles. Here I have used <u>font-size: 30px<\/u> to increase the size of the text a bit. Also text-align: center is used to place text in the middle.<\/p>\n<div class=\"class\">&nbsp;&lt;h2&gt;Gradient Generator&lt;\/h2&gt;<\/div>\n<div class=\"class\">\n<div class=\"class\">.wrapper h2{<\/div>\n<div class=\"class\">&nbsp; text-align: center;<\/div>\n<div class=\"class\">&nbsp; margin-bottom: 32px;<\/div>\n<div class=\"class\">&nbsp; letter-spacing: 1px;<\/div>\n<div class=\"class\">&nbsp; font-family: sans-serif;<\/div>\n<div class=\"class\">&nbsp; font-size: 30px;<\/div>\n<div class=\"class\">&nbsp; color: #0558b7;<\/div>\n<div class=\"class\">}<\/div>\n<\/div>\n<div class=\"separator\" style=\"clear: both;\"><a href=\"https:\/\/blogger.googleusercontent.com\/img\/a\/AVvXsEhSSnI3Vze8wLY71vRV5tge5oQLhqikTErEtIUTucVzB4i-KKu8phfDCgld66dxKiwVk9jn6Myc5K6OmPzWEaKrIz54VsH7ytF3XSX9CAn7RLt5FzOXXn872Av6Njeq8UGeZbK2oud5_pmtX2ho8Fv390HekgKktRxJHF09ajKBpZP3bZNL5TGBVC_Hgg\" style=\"display: block; padding: 1em 0px; text-align: center;\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" alt=\"Add a title in the box\" border=\"0\" data-original-height=\"578\" data-original-width=\"1280\" src=\"https:\/\/blogger.googleusercontent.com\/img\/a\/AVvXsEhSSnI3Vze8wLY71vRV5tge5oQLhqikTErEtIUTucVzB4i-KKu8phfDCgld66dxKiwVk9jn6Myc5K6OmPzWEaKrIz54VsH7ytF3XSX9CAn7RLt5FzOXXn872Av6Njeq8UGeZbK2oud5_pmtX2ho8Fv390HekgKktRxJHF09ajKBpZP3bZNL5TGBVC_Hgg=s16000\" title=\"Now I have added a title above all in this design. I added titles using h2 tags to use titles.\"><\/a><\/div>\n<h3 style=\"font-size: 25px; text-align: left;\"><span style=\"color: #800180;\">Step 3:<\/span>&nbsp;Create a color viewing display&nbsp;<\/h3>\n<p style=\"text-align: left;\">Now using the codes below I have created the display for you to see the gradient color. Whenever you click on the Generate button, a random color is generated in this display. Display <u>width: 100%<\/u> used and <u>height: 35vmin<\/u>.<\/p>\n<div class=\"class\">&nbsp;&lt;div id=&#8221;output-color&#8221;&gt;&lt;\/div&gt;<\/div>\n<div class=\"class\">\n<div class=\"class\">#output-color{<\/div>\n<div class=\"class\">&nbsp; &nbsp; width: 100%;<\/div>\n<div class=\"class\">&nbsp; &nbsp; height: 35vmin;<\/div>\n<div class=\"class\">&nbsp; &nbsp; border-radius: 5px;<\/div>\n<div class=\"class\">}<\/div>\n<\/div>\n<div class=\"separator\" style=\"clear: both;\"><a href=\"https:\/\/blogger.googleusercontent.com\/img\/a\/AVvXsEjJL4i5WNPo1pelz0l2WAzWPpIY8vSweRq_rh8IfTU5fl1dPbbV3eeD7Xq8v6UhmI5W4l4VG-tI4t_nneyH_0vqRwkqRHv71WakBJ6qQR3wndVickTMZvkpmby5EhvhlFw4e8XTvg5vKQBbXdEuaceFoWJJ7RKDykNBs_-itipWZ3PH4xuU8i0wNAmRoA\" style=\"display: block; padding: 1em 0px; text-align: center;\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" alt=\"Create a color viewing display\" border=\"0\" data-original-height=\"563\" data-original-width=\"1000\" src=\"https:\/\/blogger.googleusercontent.com\/img\/a\/AVvXsEjJL4i5WNPo1pelz0l2WAzWPpIY8vSweRq_rh8IfTU5fl1dPbbV3eeD7Xq8v6UhmI5W4l4VG-tI4t_nneyH_0vqRwkqRHv71WakBJ6qQR3wndVickTMZvkpmby5EhvhlFw4e8XTvg5vKQBbXdEuaceFoWJJ7RKDykNBs_-itipWZ3PH4xuU8i0wNAmRoA=s16000\" title=\"Now using the codes below I have created the display for you to see the gradient color.\"><\/a><\/div>\n<h3 style=\"font-size: 25px; text-align: left;\"><span style=\"color: #800180;\">Step 4:<\/span>&nbsp;Create a gradient color code box<\/h3>\n<p style=\"text-align: left;\">Now I have made a small box to see the color codes. The code of the color that can be seen in the display can be seen in this box. This allows you to easily copy the code and use it in any of your own work. I have used the width: 100% of this box and have used <u>font-size: 2.7vmin<\/u>.<\/p>\n<div class=\"class\">&lt;input type=&#8221;text&#8221; id=&#8221;output-code&#8221; readonly&gt;<\/div>\n<div class=\"class\">\n<div class=\"class\">#output-code{<\/div>\n<div class=\"class\">&nbsp; &nbsp; background-color: #f1f5fc;<\/div>\n<div class=\"class\">&nbsp; &nbsp; font-size: 2.7vmin;<\/div>\n<div class=\"class\">&nbsp; &nbsp; font-weight: 500;<\/div>\n<div class=\"class\">&nbsp; &nbsp; color: #044db4;<\/div>\n<div class=\"class\">&nbsp; &nbsp; width: 100%;<\/div>\n<div class=\"class\">&nbsp; &nbsp; padding: 15px 10px;<\/div>\n<div class=\"class\">&nbsp; &nbsp; border-radius: 5px;<\/div>\n<div class=\"class\">&nbsp; &nbsp; border: 1px solid #cfd5d5;<\/div>\n<div class=\"class\">&nbsp; &nbsp; margin: 20px 0 40px 0;<\/div>\n<div class=\"class\">}<\/div>\n<\/div>\n<div class=\"separator\" style=\"clear: both;\"><a href=\"https:\/\/blogger.googleusercontent.com\/img\/a\/AVvXsEjr1tyKiBHuaCMiXwvvg6kVtok0zUx_vYfg1RGj42hSKKIC45XSyysYYqX3jzDFvarEmxnfqqr5wQAfSw9msrxVIyf0fsw6BvrbNB9KGZTKs82nHw4HKyUs9O3edsiiUPWG6H3Vr9reAFKZ89id757txtTwey00oy1iwRco39b-XIJpDbV2QDWpCaLD2Q\" style=\"display: block; padding: 1em 0px; text-align: center;\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" alt=\"Create a gradient color code box\" border=\"0\" data-original-height=\"609\" data-original-width=\"1200\" src=\"https:\/\/blogger.googleusercontent.com\/img\/a\/AVvXsEjr1tyKiBHuaCMiXwvvg6kVtok0zUx_vYfg1RGj42hSKKIC45XSyysYYqX3jzDFvarEmxnfqqr5wQAfSw9msrxVIyf0fsw6BvrbNB9KGZTKs82nHw4HKyUs9O3edsiiUPWG6H3Vr9reAFKZ89id757txtTwey00oy1iwRco39b-XIJpDbV2QDWpCaLD2Q=s16000\" title=\"Now I have made a small box to see the color codes. The code of the color that can be seen in the display can be seen in this box.\"><\/a><\/div>\n<h3 style=\"font-size: 25px; text-align: left;\"><span style=\"color: #800180;\">Step 5:<\/span>&nbsp;Create two buttons in the design<\/h3>\n<p style=\"text-align: left;\">\nWe have created two buttons in this <b>random gradient color generator system<\/b>. The first button is to generate color and the second button is to copy this color code.&nbsp;Here we have used <u>display: flex<\/u> so that the two buttons are positioned side by side.<\/p>\n<div class=\"class\">\n<div class=\"class\">&nbsp;&lt;div class=&#8221;btn-container&#8221;&gt;<\/div>\n<div class=\"class\">&nbsp; &nbsp; &lt;button id=&#8221;generate-btn&#8221;&gt;Generate&lt;\/button&gt;<\/div>\n<div class=\"class\">&nbsp; &nbsp; &lt;button id=&#8221;copy-btn&#8221;&gt;Copy&lt;\/button&gt;<\/div>\n<div class=\"class\">&nbsp;&lt;\/div&gt;<\/div>\n<\/div>\n<div class=\"class\">\n<div class=\"class\">.btn-container{<\/div>\n<div class=\"class\">&nbsp; &nbsp; display: flex;<\/div>\n<div class=\"class\">&nbsp; &nbsp; justify-content: space-around;<\/div>\n<div class=\"class\">}<\/div>\n<div class=\"class\">.btn-container button{<\/div>\n<div class=\"class\">&nbsp; &nbsp; background-color: #2e80b3;<\/div>\n<div class=\"class\">&nbsp; &nbsp; min-width: 42%;<\/div>\n<div class=\"class\">&nbsp; &nbsp; padding: 12px 0;<\/div>\n<div class=\"class\">&nbsp; &nbsp; color: #ffffff;<\/div>\n<div class=\"class\">&nbsp; &nbsp; border-radius: 7px;<\/div>\n<div class=\"class\">&nbsp; &nbsp; font-size: 3vmin;<\/div>\n<div class=\"class\">&nbsp; &nbsp; margin-bottom: 8px;<\/div>\n<div class=\"class\">&nbsp; &nbsp; font-weight: 500;<\/div>\n<div class=\"class\">&nbsp; &nbsp; cursor: pointer;<\/div>\n<div class=\"class\">}<\/div>\n<\/div>\n<p style=\"text-align: left;\">Using the CSS below, I set different background colors for the two buttons. This has taken the help of <u>nth-last-of-type () <\/u>to add a background color.<\/p>\n<div class=\"class\">\n<div class=\"class\">.btn-container button:nth-last-of-type(1){<\/div>\n<div class=\"class\">&nbsp; background-color: #ae7617;<\/div>\n<div class=\"class\">}<\/div>\n<div class=\"class\">.btn-container button:nth-last-of-type(1):active{<\/div>\n<div class=\"class\">&nbsp; background: #1bb916;<\/div>\n<div class=\"class\">}<\/div>\n<\/div>\n<div class=\"separator\" style=\"clear: both;\"><a href=\"https:\/\/blogger.googleusercontent.com\/img\/a\/AVvXsEh120YBVhigGJ_RTpqwUVLzP5XTec6WuD2QQij1bbk9c9pf6SwySnjS2xEaDZDcXv-THL62oHNKz0mCIyAtHGtdFZkXiVEFEPfyscNxf2_aA0rWQFhSi3dS1RQSixD97Qzg9TQCYLrmZsLxFNfXiyzTyRFmZnSCJfr877bd6coPPaafQBOYmY0S3gFsbg\" style=\"display: block; padding: 1em 0px; text-align: center;\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" alt=\"Create two buttons in the design\" border=\"0\" data-original-height=\"624\" data-original-width=\"1280\" src=\"https:\/\/blogger.googleusercontent.com\/img\/a\/AVvXsEh120YBVhigGJ_RTpqwUVLzP5XTec6WuD2QQij1bbk9c9pf6SwySnjS2xEaDZDcXv-THL62oHNKz0mCIyAtHGtdFZkXiVEFEPfyscNxf2_aA0rWQFhSi3dS1RQSixD97Qzg9TQCYLrmZsLxFNfXiyzTyRFmZnSCJfr877bd6coPPaafQBOYmY0S3gFsbg=s16000\" title=\"We have created two buttons in this random gradient color generator system.\"><\/a><\/div>\n<h3 style=\"font-size: 25px; text-align: left;\"><span style=\"color: #800180;\">Step 6:<\/span>&nbsp;Activate the Random Gradient Generator using JavaScript<\/h3>\n<p>Above we have made this system absolutely. Now you have to implement this project using JavaScript.<br \/>\nFirst I used four line code to determine the constant of some of the ID functions. Here we have set a constant of generator button, copy button, output code box, and color display.<\/p>\n<div class=\"class\">\n<div class=\"class\">let generateBtn = document.getElementById(&#8220;generate-btn&#8221;);<\/div>\n<div class=\"class\">let copyBtn = document.getElementById(&#8220;copy-btn&#8221;);<\/div>\n<div class=\"class\">let outputColor = document.getElementById(&#8220;output-color&#8221;);<\/div>\n<div class=\"class\">let outputCode = document.getElementById(&#8220;output-code&#8221;);<\/div>\n<\/div>\n<p style=\"text-align: left;\">\n<p>Now I&#8217;ve added color code elements using <a href=\"https:\/\/codebeautify.org\/hex-string-converter\" target=\"_blank\" rel=\"noopener\">hex string<\/a>. The hexstring is a string of <a href=\"https:\/\/simple.wikipedia.org\/wiki\/Hexadecimal#:~:text=Hexadecimal%20uses%20the%20decimal%20numbers,and%20hexadecimal%20F%20%3D%20decimal%2015.\" target=\"_blank\" rel=\"noopener\">hexadecimal characters<\/a>. Here we have used numbers from zero to 9 and characters from a to f. Basically, these characters are combined with each other to create color.<\/p>\n<div class=\"class\">let hexString = &#8220;0123456789abcdef&#8221;;<\/div>\n<p style=\"text-align: left;\">\n&nbsp;Using the below JavaScript I have been instructed to create the colors randomly. Here I have used <a href=\"https:\/\/www.w3schools.com\/js\/js_random.asp\" target=\"_blank\" rel=\"noopener\">Math.random<\/a> which will generate a different color each time.<\/p>\n<div class=\"class\">\n<div class=\"class\">let randomColor = () =&gt; {<\/div>\n<div class=\"class\">&nbsp; &nbsp; let hexCode = &#8220;#&#8221;;<\/div>\n<div class=\"class\">&nbsp; &nbsp; for( i=0; i&lt;6; i++){<\/div>\n<div class=\"class\">&nbsp; &nbsp; &nbsp; &nbsp; hexCode += hexString[Math.floor(Math.random() * hexString.length)];<\/div>\n<div class=\"class\">&nbsp; &nbsp; }<\/div>\n<div class=\"class\">&nbsp; &nbsp; return hexCode;<\/div>\n<div class=\"class\">}<\/div>\n<\/div>\n<p style=\"text-align: left;\">Now I have created a random gradient by combining the colors using this code. Above we have created the color code. Now I will create a gradient by adding those random colors. I stored the first random color in a constant called <u>colorOne<\/u> and added the second color in <u>colorTwo<\/u>.<\/p>\n<p style=\"text-align: left;\">Then with the help of Math.random I have created a random angle here. As a result, the two colors will be connected to each other at different angles.<\/p>\n<p style=\"text-align: left;\">&nbsp;Then using <u>output color.style.background<\/u> the colors are displayed in the display.<\/p>\n<p style=\"text-align: left;\">The code box has been executed using the last line JavaScript. As a result, this color code can be seen in the box in the project.<\/p>\n<div class=\"class\">\n<div class=\"class\" style=\"text-align: left;\">let generateGrad = () =&gt; {<\/div>\n<div class=\"class\">&nbsp; &nbsp; let colorOne = randomColor();<\/div>\n<div class=\"class\">&nbsp; &nbsp; let colorTwo = randomColor();<\/div>\n<div class=\"class\">&nbsp; &nbsp; let angle = Math.floor(Math.random() * 360);<\/div>\n<div class=\"class\">&nbsp; &nbsp; outputColor.style.background = `linear-gradient(${angle}deg, ${colorOne}, ${colorTwo})`;<\/div>\n<div class=\"class\">&nbsp; &nbsp; outputCode.value = `background: linear-gradient(${angle}deg, ${colorOne}, ${colorTwo});`;<\/div>\n<div class=\"class\">}<\/div>\n<\/div>\n<p style=\"text-align: left;\">Now I have activated the copy button. This random gradient color will be copied whenever you click on the copy button. Then you can use it in your CSS file.<\/p>\n<div class=\"class\">\n<div class=\"class\">copyBtn.addEventListener(&#8220;click&#8221;, () =&gt; {<\/div>\n<div class=\"class\">&nbsp; &nbsp; outputCode.select();<\/div>\n<div class=\"class\">&nbsp; &nbsp; document.execCommand(&#8220;copy&#8221;);<\/div>\n<div class=\"class\">});<\/div>\n<\/div>\n<p style=\"text-align: left;\">\nI have executed the generate button using the JavaScript below. Each time you click on the generator button, a different color will be randomly generalized.<\/p>\n<div class=\"class\">\n<div class=\"class\">generateBtn.addEventListener(&#8220;click&#8221;, generateGrad);<\/div>\n<div class=\"class\">window.onload = generateGrad;<\/div>\n<\/div>\n<div class=\"separator\" style=\"clear: both;\"><a href=\"https:\/\/blogger.googleusercontent.com\/img\/a\/AVvXsEjCDswpllMCdZN3bpqSqpZa_iS_p-A_0Wt2rMbJKZwIA3LS9IUICFnwFJkgLvdNaUhjkwFGWCqp4_V-_zYCs6rc-YJzIPBdSvwmanOksw4Mky4jy4mGjKOdx6nELZhqEojKPejmT27pDS0_f4WRz9vmqhGFYah_jVZB_JEX1t0Ce2pg7hKmMNhMKLWVbQ\" style=\"display: block; padding: 1em 0px; text-align: center;\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" alt=\"Random Gradient Generator using JavaScript\" border=\"0\" data-original-height=\"508\" data-original-width=\"1000\" src=\"https:\/\/blogger.googleusercontent.com\/img\/a\/AVvXsEjCDswpllMCdZN3bpqSqpZa_iS_p-A_0Wt2rMbJKZwIA3LS9IUICFnwFJkgLvdNaUhjkwFGWCqp4_V-_zYCs6rc-YJzIPBdSvwmanOksw4Mky4jy4mGjKOdx6nELZhqEojKPejmT27pDS0_f4WRz9vmqhGFYah_jVZB_JEX1t0Ce2pg7hKmMNhMKLWVbQ=s16000\" title=\"Activate the Random Gradient Generator using JavaScript\"><\/a><\/div>\n<p style=\"text-align: left;\">I hope you have learned from this tutorial how I created this project (Gradient Generator with JavaScript &amp; CSS). I have already created many projects that will increase your knowledge about JavaScript.<\/p>\n<p style=\"text-align: left;\">If you have difficulty understanding this <b>JavaScript Random Gradient Generator<\/b> you can ask me directly on Instagram(<a href=\"https:\/\/www.instagram.com\/foolishdeveloper\/\" target=\"_blank\" rel=\"noopener\">@foolishdeveloper<\/a>).<\/p>\n<div><\/div>\n<p><script><br \/>\nfunction generate(){var e,n=document.getElementById(\"downloadx\"),t=document.getElementById(\"btnx\"),a=document.getElementById(\"downloadx\").href,l=25,d=document.createElement(\"span\");n.parentNode.replaceChild(d,n),e=setInterval(function(){--l<0?(d.parentNode.replaceChild(n,d),clearInterval(e),window.location.replace(a),n.style.display=\"inline\"):(d.innerHTML=\"\n\n\n\n\n\n<p style='text-align: center'>Download will start after \"+l.toString()+\" Seconds<\/p>\n<p>\",t.style.display=\"none\")},1e3)}<br \/>\n<\/script><\/p>\n<p><button class=\"last-btn\" id=\"btnx\" onclick=\"generate()\"><i class=\"fa fa-download\"><\/i> Download Code<\/button><\/p>\n<p><a href=\"https:\/\/drive.google.com\/uc?export=download&amp;id=175IGNC43gJSxCVyNZTfxJ82Z0XKGvdFa\" id=\"downloadx\" style=\"display: none;\" target=\"_blank\" rel=\"noopener\"><i aria-hidden=\"true\" class=\"fa fa-cloud-download fa-fw\"><\/i> <b>The download will start automatically<\/b> <\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this article, you will learn how to build a Random Gradient Generator using JavaScript, HTML, and CSS. CSS Gradient Generator is basically a simple JavaScript project that will increase the knowledge of beginners about JavaScript. inear-gradient is mainly used in the background of web pages. If you know basic JavaScript, you can easily create [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":564,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"ocean_post_layout":"","ocean_both_sidebars_style":"","ocean_both_sidebars_content_width":0,"ocean_both_sidebars_sidebars_width":0,"ocean_sidebar":"","ocean_second_sidebar":"","ocean_disable_margins":"enable","ocean_add_body_class":"","ocean_shortcode_before_top_bar":"","ocean_shortcode_after_top_bar":"","ocean_shortcode_before_header":"","ocean_shortcode_after_header":"","ocean_has_shortcode":"","ocean_shortcode_after_title":"","ocean_shortcode_before_footer_widgets":"","ocean_shortcode_after_footer_widgets":"","ocean_shortcode_before_footer_bottom":"","ocean_shortcode_after_footer_bottom":"","ocean_display_top_bar":"default","ocean_display_header":"default","ocean_header_style":"","ocean_center_header_left_menu":"","ocean_custom_header_template":"","ocean_custom_logo":0,"ocean_custom_retina_logo":0,"ocean_custom_logo_max_width":0,"ocean_custom_logo_tablet_max_width":0,"ocean_custom_logo_mobile_max_width":0,"ocean_custom_logo_max_height":0,"ocean_custom_logo_tablet_max_height":0,"ocean_custom_logo_mobile_max_height":0,"ocean_header_custom_menu":"","ocean_menu_typo_font_family":"","ocean_menu_typo_font_subset":"","ocean_menu_typo_font_size":0,"ocean_menu_typo_font_size_tablet":0,"ocean_menu_typo_font_size_mobile":0,"ocean_menu_typo_font_size_unit":"px","ocean_menu_typo_font_weight":"","ocean_menu_typo_font_weight_tablet":"","ocean_menu_typo_font_weight_mobile":"","ocean_menu_typo_transform":"","ocean_menu_typo_transform_tablet":"","ocean_menu_typo_transform_mobile":"","ocean_menu_typo_line_height":0,"ocean_menu_typo_line_height_tablet":0,"ocean_menu_typo_line_height_mobile":0,"ocean_menu_typo_line_height_unit":"","ocean_menu_typo_spacing":0,"ocean_menu_typo_spacing_tablet":0,"ocean_menu_typo_spacing_mobile":0,"ocean_menu_typo_spacing_unit":"","ocean_menu_link_color":"","ocean_menu_link_color_hover":"","ocean_menu_link_color_active":"","ocean_menu_link_background":"","ocean_menu_link_hover_background":"","ocean_menu_link_active_background":"","ocean_menu_social_links_bg":"","ocean_menu_social_hover_links_bg":"","ocean_menu_social_links_color":"","ocean_menu_social_hover_links_color":"","ocean_disable_title":"default","ocean_disable_heading":"default","ocean_post_title":"","ocean_post_subheading":"","ocean_post_title_style":"","ocean_post_title_background_color":"","ocean_post_title_background":0,"ocean_post_title_bg_image_position":"","ocean_post_title_bg_image_attachment":"","ocean_post_title_bg_image_repeat":"","ocean_post_title_bg_image_size":"","ocean_post_title_height":0,"ocean_post_title_bg_overlay":0.5,"ocean_post_title_bg_overlay_color":"","ocean_disable_breadcrumbs":"default","ocean_breadcrumbs_color":"","ocean_breadcrumbs_separator_color":"","ocean_breadcrumbs_links_color":"","ocean_breadcrumbs_links_hover_color":"","ocean_display_footer_widgets":"default","ocean_display_footer_bottom":"default","ocean_custom_footer_template":"","ocean_post_oembed":"","ocean_post_self_hosted_media":"","ocean_post_video_embed":"","ocean_link_format":"","ocean_link_format_target":"self","ocean_quote_format":"","ocean_quote_format_link":"post","ocean_gallery_link_images":"on","ocean_gallery_id":[],"footnotes":""},"categories":[40,53,183,14,13,41,185],"tags":[],"class_list":["post-205","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-best_javascript","category-for_experts","category-gradient_generator","category-html","category-javascript","category-javascript_app","category-s11","entry","has-media"],"_links":{"self":[{"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/posts\/205","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/comments?post=205"}],"version-history":[{"count":1,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/posts\/205\/revisions"}],"predecessor-version":[{"id":565,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/posts\/205\/revisions\/565"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/media\/564"}],"wp:attachment":[{"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/media?parent=205"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/categories?post=205"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/tags?post=205"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}