Css random background color

Random Gradient Generator using JavaScript & CSS

In this article you will learn how to make Random Gradient Generator using JavaScript HTML and CSS. At different times we also use Gradient color in web pages. This type of color you can easily create through CSS. However, many times making the perfect gradient combination is much more difficult. To solve this problem I have created this project which can create colors randomly in a single click. Watch its live demo to learn how it works.The most important point is that the colors will be added here at different angles. I made it with JavaScript only. Below all are two buttons to generate one and copy the other. When you click on the Generate button, a different color will be generated each time. You can copy this color code by clicking on the copy button.

Step 1: Create the basic structure of Gradient Generator

We have created the basic structure of this project (Random Gradient Generator using JavaScript) using the following HTML and CSS code. First I added the background color of the webpage with the help of CSS code. Then I made a box. I used the width of that box: 410px and the background color is white. I also added border-radius: 8px to make the four angles slightly rounded.

* padding: 0; margin: 0; box-sizing: border-box; border: none; outline: none; font-family: "Poppins",sans-serif; > body height: 100vh; background: #448aff; > .wrapper width: 410px; background-color: #ffffff; padding: 30px 30px; border-radius: 8px; position: absolute; transform: translate(-50%,-50%); left: 50%; top: 50%; box-shadow: 0 20px 25px rgba(60,60,100,0.15); > 

Step 2: Add headings to the box

Now I have added a title to this design. I have taken the help of h2 tags to add this title. Then I added the required style here using CSS code.

.wrapper h2 text-align: center; margin-bottom: 32px; letter-spacing: 1px; font-family: sans-serif; font-size: 30px; color: #0558b7; > 

Step 3: Create a display to see gradient colors

Gradient has created a display for color viewing. This display will help to see the random gradient colors. Each time you click on the Generate button, a different color is created.

#output-color width: 100%; height: 35vmin; border-radius: 5px; > 

Step 4: Create a box for the color code

Now I have created a box to view the color code. When you create a gradient color, the code required for it can be found in that box. This allows you to copy this code and use it in your CFS file. I have used padding to determine the width: 100% and height of this box.

 type="text" id="output-code" readonly> 

#output-code background-color: #f1f5fc; font-size: 2.7vmin; font-weight: 500; color: #044db4; width: 100%; padding: 15px 10px; border-radius: 5px; border: 1px solid #cfd5d5; margin: 20px 0 40px 0; > 

Step 5: Create Generate Button and Copy Button

Now I have created two buttons in this gradient generator. One will generate color and the other will copy. For this I used the button function of simple HTML and then designed it with the help of CSS.

  class="btn-container">  id="generate-btn">Generate  id="copy-btn">Copy  

.btn-container display: flex; justify-content: space-around; > .btn-container button background-color: #2e80b3; min-width: 42%; padding: 12px 0; color: #ffffff; border-radius: 7px; font-size: 3vmin; margin-bottom: 8px; font-weight: 500; cursor: pointer; > 

Using a small amount of CSS code below I set the background color and hover color for the second button. I have taken the help of nth-last-of-type (1) to select the second button.

.btn-container button:nth-last-of-type(1) background-color: #ae7617; > .btn-container button:nth-last-of-type(1):active background: #1bb916; > 

Step 6: Activate the Random Gradient Generator using JavaScript

Above we have made the complete design. Now is the time to activate it using JavaScript. If you are a beginner, try to follow the complete information well. If you have difficulty understanding, you can let me know by commenting directly on my Instagram(@foolishdeveloper). Using the following four line code, I have determined the constants of some ID functions one by one. Here I have determined the constants of four ID functions such as generate button, copy button, color display and color code box.

let generateBtn = document.getElementById("generate-btn"); let copyBtn = document.getElementById("copy-btn"); let outputColor = document.getElementById("output-color"); let outputCode = document.getElementById("output-code"); 

Now I have added hexadecimal characters using the following javascript. These characters combine randomly with each other to produce color. The numbers 0 to 9 and the characters from a to f are mainly used here. Later we will create color by combining these characters with each other using JavaScript’s Math.random function.

let hexString = "0123456789abcdef"; 

Now is the time to produce colors using JavaScript’s Math.random function. If you know basic JavaScript, you can easily understand this color production method. random () method is used to generate a pseudorandom number, which is a number created with a formula that simulates randomness.

let randomColor = () =>  let hexCode = "#"; for( i=0; i6; i++) hexCode += hexString[Math.floor(Math.random() * hexString.length)]; > return hexCode; > 

Now I will create a gradient color by adding the random colors added above. You can watch its live demo.
➤ First I created two random colors and stored those two colors in Color One and Color Two. ➤ Then set an angle using Math.random. As I said before, the gradient colors can be seen here at different angles with each other. Then that random angle is stored in a constant called angle. ➤ Using line number 4 I added the first and second colors to each other at random angles. Then I arranged to show that output in the color display. ➤ I have managed to generate the color code using the JavaScript code below. The Gradient color that can be seen in the display of the code required for the color can be seen in a small box. This box I have already created using HTML and CSS code.

let generateGrad = () =>  let colorOne = randomColor(); let colorTwo = randomColor(); let angle = Math.floor(Math.random() * 360); outputColor.style.background = `linear-gradient($angle>deg, $colorOne>, $colorTwo>)`; outputCode.value = `background: linear-gradient($angle>deg, $colorOne>, $colorTwo>);`; > 

Now using the JavaScript below I have executed the copy button. Whenever you click on the copy button, the color code in the copy box will be copied.

copyBtn.addEventListener("click", () =>  outputCode.select(); document.execCommand("copy"); >); 

I have executed the generate button using the code below. Each time you click on this button, different colors will be generated.

generateBtn.addEventListener("click", generateGrad); window.onload = generateGrad; 

Final Javascript Code:

let generateBtn = document.getElementById("generate-btn"); let copyBtn = document.getElementById("copy-btn"); let outputColor = document.getElementById("output-color"); let outputCode = document.getElementById("output-code"); let hexString = "0123456789abcdef"; let randomColor = () =>  let hexCode = "#"; for( i=0; i6; i++) hexCode += hexString[Math.floor(Math.random() * hexString.length)]; > return hexCode; > let generateGrad = () =>  let colorOne = randomColor(); let colorTwo = randomColor(); let angle = Math.floor(Math.random() * 360); outputColor.style.background = `linear-gradient($angle>deg, $colorOne>, $colorTwo>)`; outputCode.value = `background: linear-gradient($angle>deg, $colorOne>, $colorTwo>);`; > copyBtn.addEventListener("click", () =>  outputCode.select(); document.execCommand("copy"); >); generateBtn.addEventListener("click", generateGrad); window.onload = generateGrad; 

Источник

How to Generate Random Background Colors With JavaScript

Jemima Abu Last updated May 31, 2021

In this tutorial you’ll learn how to change the background color of a page randomly, using JavaScript. You’ll also learn how to modify your code using HSL color values to generate only pastel colors or dark colors.

Let’s take a look at what we’ll be building:

In this demo, we change the background color and text color of the page every 1500ms. Most of the heavy lifting is done with JavaScript but let’s take a look at the content and styling:

HTML

For the content of our page, we’ll create an element with an id background and put some text in it.

Generate Random Background Colors with JavaScript

CSS

We’ll use CSS to control the background-color transition so the change looks smoother.

JavaScript

We’ll be generating random colors in JavaScript by combining these two methods:

“The hsl() functional notation expresses a given color according to its hue, saturation, and lightness components” — MDN

The hue value has a maximum of 360 and represents the degree of the color position on a color wheel. The saturation and lightness values have a maximum of 100 and represent the percentage saturation and lightness of a color respectively.

Fiddle with the ranges below to see how the Hue, Saturation and Lightness values affect how a color looks.

In order to generate completely random colors, we’ll pass random numbers within a fixed range to the three HSL values. We can do this using Math.random and Math.floor

Math.random generates random numbers between 0 and 1. We can multiply these numbers by our specified range and use Math.floor to round up to the nearest whole number.

const getRandomNumber = (maxNum) =>  

return Math.floor(Math.random() * maxNum); 

Then we’ll use the getRandomNumber function to generate random values for our HSL notation.

const h = getRandomNumber(360); 

const s = getRandomNumber(100); 

const l = getRandomNumber(100); 

Источник