Box Shadow Generator | Vivek Singh

HTML

CSS

JAVA SCRIPT

Copy Code

If Code is not visible please click on HIGHLIGHT area

                        <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800&display=swap" rel="stylesheet">
                        <div class="body">
                            <div class="contianer">
                                <div class="choose-color">
                                    <input type="color" value="#d9d9d9" class="color shadow-color" oninput="generateShadow()">
                                    <input type="color" value="#00dbde" class="color box-color" oninput="generateShadow()">
                                </div>
                                <div class="box-shadow"></div>
                                <div class="settings">
                                    <div class="all-values">
                                        <label class="value-name">Horizontal
                                            <input type="range" value="5" step="1" min="-50" max="50" class="horizontal"
                                                oninput="generateShadow()">
                                        </label>
                                        <label class="value-name">Vertical
                                            <input type="range" value="10" step="1" min="-50" max="50" class="vertical"
                                                oninput="generateShadow()">
                                        </label>
                                        <label class="value-name">Blur
                                            <input type="range" value="8" step="1" min="-50" max="50" class="blur"
                                                oninput="generateShadow()">
                                        </label>
                                        <label class="value-name">Spread
                                            <input type="range" value="10" step="1" min="-50" max="50" class="spread"
                                                oninput="generateShadow()">
                                        </label>
                                    </div>
                                    <label class="checkbox-wrapper">
                                        <input type="checkbox" name="checkbox" class="checkbox" oninput="generateShadow()">
                                        <span class="value-name">Inset</span>
                                    </label>
                                </div>
                                <div class="code-area">
                                    <p>5px 10px 8px 10px rgba(0,0,0,0.15) inset</p>
                                </div>
                            </div>
                        </div>

                        <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800&display=swap" rel="stylesheet">

Copy Code

If Code is not visible please click on HIGHLIGHT area

                        .body {
                            width: 100%;
                            min-height: 100vh;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            background-color: #FBAB7E;
                            background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
                        }
                    
                        .contianer {
                            background-color: #fff;
                            padding: 25px;
                            padding-bottom: 30px;
                            border-radius: 20px;
                            overflow: hidden;
                            position: relative;
                        }
                    
                        .choose-color {
                            display: flex;
                            align-content: center;
                            justify-content: space-between;
                            margin-bottom: 20px;
                        }
                    
                        .choose-color input[type="color"]::-webkit-color-swatch-wrapper {
                            padding: 0;
                        }
                    
                        .choose-color input[type="color"]::-webkit-color-swatch {
                            border: none;
                            border-radius: 50%;
                        }
                    
                        .choose-color input[type="color"] {
                            -webkit-appearance: none;
                            height: 35px;
                            width: 35px;
                            border-radius: 50%;
                            outline: none;
                            border: none;
                            cursor: pointer;
                            margin-top: 15px;
                            margin-left: 15px;
                        }
                    
                        .box-shadow {
                            width: 80%;
                            height: 200px;
                            background-color: #00DBDE;
                            margin: 30px auto;
                            margin-bottom: 70px;
                            box-shadow: 5px 10px 8px 10px rgba(0, 0, 0, 0.15);
                        }
                    
                        .all-values {
                            display: grid;
                            grid-template-columns: repeat(2, 1fr);
                            grid-column-gap: 20px;
                            grid-row-gap: 20px;
                        }
                    
                        .value-name {
                            font-size: 16px;
                            color: #666;
                            font-weight: 400;
                        }
                    
                        .all-values label {
                            width: 100%;
                        }
                    
                        .all-values label input {
                            width: 100%;
                        }
                    
                        .checkbox-wrapper {
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            gap: 10px;
                            padding: 10px 0;
                            margin-bottom: 10px;
                        }
                    
                        .checkbox-wrapper .checkbox {
                            width: 15px;
                            height: 15px;
                        }
                    
                        .code-area {
                            width: 100%;
                            padding: 10px 0;
                            text-align: center;
                            background-color: #d9d9d9;
                            position: absolute;
                            bottom: 0;
                            left: 0;
                        }

xxxxxxxxxx
 
                        .body {
                            width: 100%;
                            min-height: 100vh;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            background-color: #FBAB7E;
                            background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
                        }
                    
                        .contianer {
                            background-color: #fff;
                            padding: 25px;
                            padding-bottom: 30px;
                            border-radius: 20px;
                            overflow: hidden;
                            position: relative;
                        }
                    
                        .choose-color {
                            display: flex;
                            align-content: center;

Copy Code

If Code is not visible please click on HIGHLIGHT area

                        function generateShadow() {
                            let shadowColor = document.querySelector('.shadow-color').value;
                            let boxColor = document.querySelector('.box-color').value;
                            let outputBox = document.querySelector('.box-shadow');
                            let horizontal = document.querySelector('.horizontal').value + 'px';
                            let vertical = document.querySelector('.vertical').value + 'px';
                            let blurShadow = document.querySelector('.blur').value + 'px';
                            let spread = document.querySelector('.spread').value + 'px';
                            let inset = document.querySelector('.checkbox').checked;
                
                            let shadow = `${horizontal} ${vertical} ${blurShadow} ${spread} ${shadowColor} ${inset ? "inset" : ""}`;
                            outputBox.style.boxShadow = shadow;
                            outputBox.style.backgroundColor = boxColor;
                
                            let shadowCode = document.querySelector('.code-area p');
                            shadowCode.innerHTML = `box-shadow: ${shadow}`;
                        }

                            let shadow = `${horizontal} ${vertical} ${blurShadow} ${spread} ${shadowColor} ${inset ? "inset" : ""}`;