DEV Community

Rohit Sharma
Rohit Sharma

Posted on

Create Box Shadow Generator with JavaScript and HTML

Hello everyone, today we are going to create Box Shadow Generator with JS and HTML. We are using almost the same concepts that we used to create Blob Generator. So, let's get started with HTML part.

HTML

<!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>Box Shadow Generator </title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div id="head">
        <h1>Box Shadow Generator</h1>
    </div>
    <div class="container">
        <div class="wrapper">

            <div id="box"></div>

            <div class="sliders">
                <input type="range" id="sldr1" value="0" min="-5" max="5">
                <input type="range" id="sldr2" value="0" min="-5" max="5">
                <input type="range" id="sldr3" value="10" min="0" max="10">
                <input type="range" id="sldr4" value="0" min="0" max="10">
            </div>

            <div class="colors">
                <label>
                    Shadow Color:
                </label>
                <input type="color" id="shadowcolor">
            </div>
            <div id="outputCode">
                <label>
                    CSS-Code:
                </label>
                <input type="text" id="css-code" readonly>
                <button id="copy">Copy</button>
            </div>
        </div>

    </div>
    <script src="main.js"></script>
</body>

</html>
Enter fullscreen mode Exit fullscreen mode

• We created <div class="container"> ,<div class="wrapper"> to wrap whole content in that and <div class="box"> this for the box (for visualizing box shadow).

• <div class="sliders"> with 4 sliders.
Format of box-shadow: {offsetX}px {offsetY}px {blurRadius}px {spreadRadius}px color;
So, these 4 sliders are for getting input from user and color picker for shadow color.

• Then there is a read only text area to display the value of box-shadow: and a button to copy that css-code .

That's it for HTML.

CSS

Now it's time to make our project look cool. So let's see the CSS part.

*{
    left: 0;
    top: 0;
}
body {
    display: grid;
    background-color: #333;
    place-items: center;
}
h1{
    color: #ffffff;
    z-index: 1;
}

.container {
    display: grid;
    place-items: center;
    background: #ffffff;
    width: 98vw;
    height: 80vh;
    left: 0;
    margin-top: 0;
    padding-top: 0;

}

.wrapper {
    display: grid;
    place-items: center;
    background: #f9f9f9;
    width: 50vw;
    height: 75vh;
}

#box {
    background: #ffffff;
    width: 180px;
    height: 180px;
    box-shadow: 5px 10px 10px 2px #333;
    margin-bottom: 3%;

}
#outputCode{
    display: flex;
    flex-direction: row;
}

#css-code {
    width: 65%;
}

input[type=text] {
    border-radius: 5px;

}

#copy { 
     color: #ffffff; 
     font-weight: bolder; 
     border-radius: 10px; 
     margin: 5px; 
     background: rgb(242, 79, 241); 
     background: linear-gradient(90deg, rgba(242, 79, 241, 1) 30%, rgba(0, 237, 255, 1) 72%); 
}
Enter fullscreen mode Exit fullscreen mode

Important Note:-
I just do the simple CSS and this is not responsive . You can do that part on your own.

JavaScript

let outputCode = document.getElementById("css-code");

let sliders = document.querySelectorAll("input[type='range']");
sliders.forEach(function (slider) {
    slider.addEventListener("input", createBox);
});


let color = document.querySelectorAll("input[type='color']"); {
    color.forEach(function (colors) {
        colors.addEventListener("change", createBox);
    });
}

function createBox() {
    let X = sliders[0].value;
    let Y = sliders[1].value;
    let blurRadius = sliders[2].value;
    let spreadRadius = sliders[3].value;

    let shadowcolor = color[0].value;

    let boxShadow = `${X}px ${Y}px ${blurRadius}px ${spreadRadius}px`;

    document.getElementById("box").style.cssText = `box-shadow: ${boxShadow} ${shadowcolor}`;

    outputCode.value = `box-shadow: ${boxShadow};`
}

let output = document.getElementById("css-code");
let btnCopy = document.getElementById("copy");

btnCopy.onclick = function () {
    output.select();
    document.execCommand("Copy");
    alert("Code Copied");
}

createBox();



Enter fullscreen mode Exit fullscreen mode

This code is for copying the value of box-shadow

btnCopy.onclick = function () {
    output.select();
    document.execCommand("Copy");
    alert("Code Copied");
}
Enter fullscreen mode Exit fullscreen mode

If you love it then make sure to like this post and save it for future

You can check my demo work here

Discussion (0)