Can anyone tell me how to generate random colors for the background of a website using css? is it possible?
P粉267791326
P粉267791326 2023-09-06 22:53:31
0
1
489

Just like we can use unsplash image source to use random images. Likewise, can we achieve background color using just css? If yes can anyone tell how to do it?

I use a random function to generate a random color for the background in the style. But it doesn't give any output

P粉267791326
P粉267791326

reply all(1)
P粉878510551

This will require at least some JS to randomly generate colors

const container = document.getElementById('element');

generateRandomColor();

function generateRandomColor() {
  // 16777215 is decimal equivalent of FFFFFF in hexadecimal
  const randomHex = Math.floor(Math.random() * 16777215).toString(16);
  container.style.backgroundColor = `#${randomHex}`;
  container.innerHTML = `#${randomHex}`;
}
.container {
  height: 100px;
  width: 100%;
  border: 1px solid black;
  margin-bottom: 5px;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  font-size: 24px;
}
<div id="element" class="container"></div>
<button onclick="generateRandomColor()">Generate Random Color</button>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template