How to Create Random Color Generator with 3D Effect

148
0

Hello friends, today in this blog, we will learn how to create a random color generator with 3D Effects. In our previous blog, we saw how to create an image editor using cropper.js. You can check my other javascript projects after reading this blog.

Color plays a vital role in the design and web development. It can make or break a website’s visual appeal and influence a user’s emotions and perceptions. However, choosing the right color can be challenging, especially when there are so many options available. One solution is to use a random color generator, which generates colors on the fly and helps you discover new color palettes.

In this blog post, we will guide you through the steps to create your own random color generator with a 3D effect using HTML, CSS, and JavaScript. This generator will not only help you generate random colors but also allow you to experiment with complementary colors and copy the generated color code. Additionally, we will create a 3D effect on the background of the color generator, making it more visually appealing.

Whether you’re a web developer, designer, or simply someone interested in experimenting with colors, this blog post is for you. By the end of this tutorial, you will have a better understanding of how to generate random colors with a 3D effect and how to apply them to your web development projects. So, let’s dive in and create a beautiful and dynamic color generator together!

Note:
You can check live demo and download code files from here.

Code of HTML, CSS, and JavaScript Files

Here’s the good news: you don’t have to write all the code of this project from scratch! I have created a GitHub repository that contains all the HTML, CSS, and JavaScript code needed to build the app. You can check it out and use it as a starting point for your own project.

HTML CODE

Just paste this code into HTML File which you have created.

<!-- --------------------- Created By InCoder --------------------- -->  
 <!DOCTYPE html>  
 <html lang="en">  
 <head>  
   <meta charset="UTF-8">  
   <meta http-equiv="X-UA-Compatible" content="IE=edge">  
   <meta name="viewport" content="width=device-width, initial-scale=1.0">  
   <title>Random Color Generator - InCoder</title>  
   <link rel="stylesheet" href="main.css">  
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">  
 </head>  
 <body>  
   <div class="copyMsg">  
     <i class="fa-solid fa-check-circle"></i>  
     Color Code Copied  
   </div>  
   <div class="container">  
     <div class="wrapper">  
       <div class="colorWrapper js-tilt" data-tilt>  
         <span>Click to Copy!</span>  
         <div class="color"><span></span></div>  
       </div>  
       <div class="colorWrapper js-tilt" data-tilt>  
         <span>Click to Copy!</span>  
         <div class="color"><span></span></div>  
       </div>  
       <div class="colorWrapper js-tilt" data-tilt>  
         <span>Click to Copy!</span>  
         <div class="color"><span></span></div>  
       </div>  
       <div class="colorWrapper js-tilt" data-tilt>  
         <span>Click to Copy!</span>  
         <div class="color"><span></span></div>  
       </div>  
     </div>  
     <div class="wrapper">  
       <div class="colorWrapper js-tilt" data-tilt>  
         <span>Click to Copy!</span>  
         <div class="color"><span></span></div>  
       </div>  
       <div class="colorWrapper js-tilt" data-tilt>  
         <span>Click to Copy!</span>  
         <div class="color"><span></span></div>  
       </div>  
       <div class="colorWrapper js-tilt" data-tilt>  
         <span>Click to Copy!</span>  
         <div class="color"><span></span></div>  
       </div>  
       <div class="colorWrapper js-tilt" data-tilt>  
         <span>Click to Copy!</span>  
         <div class="color"><span></span></div>  
       </div>  
     </div>  
     <button class="refreshColors">Refresh Colors</button>  
   </div>  
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"  
     referrerpolicy="no-referrer"></script>  
   <script src="https://cdnjs.cloudflare.com/ajax/libs/tilt.js/1.2.1/tilt.jquery.min.js"></script>  
   <script src="script.js"></script>  
 </body>  
 </html> 

CSS CODE

@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");  
 /* --------------------- Created By InCoder --------------------- */  
 * {  
  margin: 0;  
  padding: 0;  
  box-sizing: border-box;  
  font-family: "Poppins", sans-serif;  
 }  
 body {  
   height: 100%;  
 }  
 .container {  
  width: 100%;  
  padding: 2rem;  
  display: flex;  
  align-items: center;  
  flex-direction: column;  
  justify-content: center;  
 }  
 .wrapper {  
  display: flex;  
  flex-wrap: wrap;  
  margin-bottom: 2rem;  
  align-items: center;  
  justify-content: center;  
 }  
 .colorWrapper {  
  height: 12rem;  
  padding: 1rem;  
  min-width: 10rem;  
  overflow: hidden;  
  margin-left: 1rem;  
  margin-right: 1rem;  
  position: relative;  
  margin-bottom: 1rem;  
  border-radius: 0.2rem;  
  box-shadow: 0 0 18px 0px #0000004d;  
 }  
 .colorWrapper > span {  
  top: 0;  
  left: 0;  
  opacity: 0;  
  width: 100%;  
  height: 100%;  
  color: #fff;  
  display: flex;  
  user-select: none;  
  position: absolute;  
  align-items: center;  
  justify-content: center;  
  content: "Click to Copy!";  
  background-color: #20202061;  
  transition: opacity 0.2s ease-in-out;  
 }  
 .colorWrapper:hover > span {  
  opacity: 1;  
 }  
 .colorWrapper .color {  
  height: 80%;  
  display: flex;  
  align-items: center;  
  justify-content: center;  
 }  
 .colorWrapper .color span {  
  bottom: 1.21rem;  
  user-select: none;  
  position: absolute;  
 }  
 .refreshColors {  
  border: 0px;  
  z-index: 1;  
  color: #fff;  
  cursor: pointer;  
  overflow: hidden;  
  font-size: 1.2rem;  
  position: relative;  
  border-radius: 6px;  
  padding: 0.8rem 2rem;  
  transform: scale(0.85);  
  text-decoration: none;  
  background-position: 5rem;  
  text-transform: capitalize;  
  background-color: #b91a58;  
 }  
 .refreshColors:focus {  
  outline: none;  
 }  
 .refreshColors::before {  
  top: 0%;  
  content: "";  
  left: -100%;  
  z-index: -1;  
  width: 100%;  
  height: 100%;  
  color: #fff;  
  position: absolute;  
  transition: left 0.4s;  
  background-color: #202020;  
 }  
 .refreshColors:hover::before {  
  left: 0%;  
 }  
 .copyMsg {  
  z-index: 2;  
  left: 1rem;  
  opacity: 0;  
  display: flex;  
  height: 3.3rem;  
  bottom: 1.2rem;  
  position: fixed;  
  padding: 0 1rem;  
  font-size: 1.4rem;  
  background: #fff;  
  align-items: center;  
  transform: scale(0.2);  
  border-radius: 0.6rem;  
  transform-origin: center;  
  border: 0.3rem solid #10c55d;  
  box-shadow: 0 0 20px rgb(0 0 0 / 50%);  
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;  
 }  
 .copyMsg.active {  
  opacity: 1;  
  transform: scale(1);  
 }  
 .copyMsg i {  
  color: #10c55d;  
  margin-right: 0.6rem;  
 }  

JavaScript CODE

let copyMsg = document.querySelector('.copyMsg')  
 refreshColors = document.querySelector('.refreshColors')  
 colorWrapper = document.querySelectorAll('.colorWrapper')  
 colorDiv = document.querySelectorAll('.color')  
 const generateRandomColor = () => { // This function generates random color  
   let colorCode = `#${Math.floor(Math.random() * 16777215).toString(16)}`;  
   return colorCode  
 }  
 const copyColor = (colorCode) => { // This function copies code to clipboard  
   navigator.clipboard.writeText(colorCode).then(function () {  
     copyMsg.classList.add('active')  
     setTimeout(() => {  
       copyMsg.classList.remove('active')  
     }, 1500)  
   }, function (err) {  
     console.log('Not Copied')  
   });  
 }  
 refreshColors.addEventListener('click', () => {  
   setColors()  
 })  
 // colorWrapper.addEventListener('click', () => {  
 //   setColors()  
 // })  
 colorWrapper.forEach((wrapper) => {  
   wrapper.querySelector("span").addEventListener("click", () => {  
     let colorCode = wrapper.querySelector(".color").getAttribute('data-color')  
     copyColor(colorCode);  
   })  
 })  
 const setColors = () => {  
   colorDiv.forEach(div => {  
     div.setAttribute('data-color', generateRandomColor())  
     div.style.backgroundColor = div.dataset.color  
     div.querySelector('span').innerText = div.dataset.color  
     div.addEventListener('click', (e) => {  
       copyColor(e.target.parentElement.dataset.color)  
     })  
   })  
 }  
 setColors()  
 $('.js-tilt').tilt({  
   glare: true,  
   maxGlare: .3  
 })  
Ashutosh Tiwari
WRITTEN BY

Ashutosh Tiwari

Hey there, I'm Ashutosh Tiwari AKA InCoder and I'm a front-end and back-end developer. I create blogs, and I love helping people through my knowledgeable content. My content is all about coding and front-end design. When I'm not creating content, you can find me reading books and listening to podcasts. I set up this Buy Me a Coffee account to help support my work, as creating content takes time and effort. Every contribution helps me continue doing what I love and improving the quality of my content. Thank you so much for your support and for being a part of my journey!

Newsletter

Loading