Create Box Shadow Generator with JavaScript and HTML
Tags: javascript, webdev, html, beginners
Published: 2021-11-29 15:55:43

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](https://dev.to/devrohit0/blob-generator-using-javascript-177h). So, let's get started with HTML part.

## HTML

```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>
```

• 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.

```css
*{
    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%); 
}
```
_Important Note:-_
I just do the simple CSS and this is not _responsive_ . You can do that part on your own.

## JavaScript

```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();



```

This code is for copying the `value` of `box-shadow`

```javascript
btnCopy.onclick = function () {
    output.select();
    document.execCommand("Copy");
    alert("Code Copied");
}
```
_If you love it then make sure to like this post and save it for future_

You can check my demo work [here](https://box-shadow-generator-css.netlify.app)

{% codepen https://codepen.io/godzillaa/pen/RwLbmNa %}