How we can create a visual box-shadow editor and copy the CSS values in a click? Solution: See this JavaScript Box Shadow Editor With Copy To Clipboard Values Feature.
Previously I have shared a JS image editor program, but it is a box shadow editor where you can edit shadow values by seeing changes visually. Basically, The box-shadow CSS property adds shadow effects around an element’s frame. You can set one and multiple effects separated by commas. A box shadow is described by X and Y offsets relative to the element, blur and spread radius, and color. And using JavaScript we can create a live editor for visualizing the preview.
Today you will learn to create a live shadow and editor with preview program. Basically, there is a box and a box-shadow you will see. And there are many controllers and options like color values of both box and its shadow, background color, h-offset, v-offset, blur, spread, opacity, and inset. There is a basic color picker to changing color, and number input to change values. Also, there you can see the CSS values and copy in a single click.
So, Today I am sharing JavaScript Box Shadow Editor With Copy To Clipboard Values Feature. There I have used HTML to create the layout, CSS for styling, and JavaScript for functioning. There I have not used any library or framework to create the editor, it is a pure JS program. This program will help to create a perfect box-shadow and copy the CSS codes of it. You can use this program on your website to create an online box-shadow editor and help designers.
If you are thinking now how this visual editor program actually is, then see the preview given below.
Preview Of Live Shadow Edit and Preview
See this video preview to getting an idea of how this program looks like.
Now you can see this program visually, Also you can see it live by pressing the button given above. If you like this program, then get the source code of its.
You May Also Like:
JavaScript Box Shadow Editor Source Code
Before sharing source code, let’s talk about it. Basically, There I have created 3 div sections: the first section for box, box-shadow and its color values, second for show CSS values and copy, and the third is for controllers of shadow. There I have used input and label to create controllers. Used number input for values, and color input to pick the color. Also in the HTML file, I have linked other files like CSS and JavaScript.
Now using CSS I have placed all the elements in the right place, as you can see in the preview. With CSS first I gave basic values like size, position, margin, padding, etc to the elements. Also, I gave default color values and other color values for buttons like copy. There I have used CSS @media query for responsive design and reduces some element’s size.
JavaScript handling here all the features of the program. There is copy to clipboard function, you can copy the CSS code just in a single click. JS fetched all the elements using document.querySelector command and stored in const. I used if{} else{} statements to declare conditions. There JS only changing CSS values dynamically according to action.
Left all other things you will understand after getting the codes, I can’t explain all in writing. For creating this program you have to create 3 files. First file for HTML, Second for CSS, and third file for JavaScript. Follow the steps to creating this program without any error.
index.html
Create an HTML file named ‘index.html‘ and put these codes given below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 |
<!DOCTYPE html> <!-- Code By Webdevtrick ( https://webdevtrick.com ) --> <html lang="en" > <head> <meta charset="UTF-8"> <title>Box Shadow Editor | Webdevtrick.com</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Box Shadow Editor</h1> <div class="box-container"> <div id="box"></div> <div id="box-container-colors"> <div class="input-block"> <label for="box-background">box:</label> <input type="color" name="box-background" id="box-background" value="#40739e"> </div> <div class="input-block"> <label for="box-container-background">background:</label> <input type="color" name="box-container-background" id="box-container-background" value="#ffffff"> </div> </div> </div> <div class="generated-css-container"> <div id="generated-css">box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.25);</div> </div> <div class="settings"> <div class="input-block"> <label for="h-offset">h-offset</label> <input type="number" name="h-offset" id="h-offset" value="10"> </div> <div class="input-block"> <label for="v-offset">v-offset</label> <input type="number" name="v-offset" id="v-offset" value="10"> </div> <div class="input-block"> <label for="blur-radius">blur</label> <input type="number" min="0" name="blur-radius" id="blur-radius" value="5"> </div> <div class="input-block"> <label for="spread-radius">spread</label> <input type="number" name="spread-radius" id="spread-radius" value="0"> </div> <div class="input-block"> <label for="color">color</label> <input type="color" name="color" id="color" value="#000000"> </div> <div class="input-block"> <label for="opacity">opacity</label> <input type="number" min="0" max="1" step="0.01" name="opacity" id="opacity" value="0.25"> </div> <div class="input-block"> <label for="inset">inset</label> <input type="checkbox" name="inset" id="inset"> </div> </div> <script src="function.js"></script> </body> </html> |
style.css
Now create a CSS file named ‘style.css‘ and put these codes given here.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 |
/* Code By Webdevtrick ( https://webdevtrick.com ) */ @import url('https://fonts.googleapis.com/css?family=Montserrat'); * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Montserrat', sans-serif; background-color: #f4f4f4; color: #111; } h1 { text-align: center; font-size: 2.5rem; margin: 2rem 0; } /* Box Container */ .box-container { background-color: #fff; min-height: 50vh; width: 90%; margin: 0 auto; border: 1px solid #ccc; /* overflow: hidden; */ position: relative; display: flex; justify-content: center; align-items: center; } #box { width: 300px; height: 300px; margin: 160px; background-color: #40739e; box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.25); } #box-container-colors { position: absolute; background-color: #fff; color: #111; border: 1px solid #ccc; top: 1rem; right: 1rem; padding: 1rem; } #box-container-colors .input-block label { margin-right: 3px; } #box-container-colors .input-block:first-child { margin-bottom: 1rem; } /* Generated CSS Container */ .generated-css-container { width: 50%; margin: 1.5rem auto; line-height: 2rem; padding: 0.25rem 0.5rem; border: 1px solid #ccc; border-radius: 0.25rem; background-color: #fff; color: #111; display: flex; justify-content: space-between; align-items: center; } #generated-css { font-family: Consolas, monaco, monospace; } #generated-css-copy-btn { cursor: pointer; background-color: #111; color: #fff; border: none; width: 5rem; text-align: center; padding: 0.5rem; } #generated-css-copy-btn.success { background-color: #10ac84; } #generated-css-copy-btn.error { background-color: #c74b47; } /* Settings */ .settings { width: 90%; margin: 1.5rem auto; display: flex; flex-wrap: wrap; } .settings .input-block { padding: 1rem; font-size: 1.5rem; font-weight: bold; white-space: nowrap; flex: 1; display: flex; flex-direction: column; align-items: center; } .settings .input-block label { margin-bottom: 0.75rem; } .settings .input-block input { width: 5rem; height: 2rem; font-size: 1.25rem; font-family: inherit; } .settings .input-block input[type="number"] { padding-left: 0.5rem; } @media(max-width:1599px) { h1 { margin: 1.75rem 0; } .generated-css-container { width: 60%; } #box { width: 200px; height: 200px; margin: 110px; } } @media(max-width:1199px) { .generated-css-container { width: 75%; } } @media(max-width:959px) { .settings .input-block { flex-basis: 25%; } .generated-css-container { width: 90%; } } @media(max-width:767px) { html { font-size: 12px; } h1 { font-size: 2rem; margin: 1.5rem 0; } .box-container { width: 95%; min-height: 53vh; } #box { width: 120px; height: 120px; margin: 70px; } #box-container-colors { top: 0.25rem; right: 0.25rem; padding: 0.5rem; } #box-container-colors .input-block label { margin-right: 2px; } #box-container-colors .input-block:first-child { margin-bottom: 0.75rem; } .generated-css-container { width: 95%; margin: 1.5rem auto 1.25rem auto; padding: 0.75rem 0.5rem; border-radius: 0; position: relative; } #generated-css { font-size: 10px; } #generated-css-copy-btn { position: absolute; right: 0.25rem; top: -1rem; font-size: 0.75rem; width: 4.5rem; border-radius: 0.25rem; } .settings { width: 95%; margin: 1.25rem auto; } .settings .input-block { padding: 0.75rem; font-size: 1.25rem; } } |
function.js
The final step, create a JavaScript file named ‘function.js‘ and put the codes.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 |
// Code By Webdevtrick ( https://webdevtrick.com ) if (navigator.clipboard) { const generatedCssContainer = document.querySelector(".generated-css-container"); const generatedCssCopyBtn = document.createElement("button"); generatedCssCopyBtn.id = "generated-css-copy-btn"; generatedCssCopyBtn.textContent = "Copy"; generatedCssContainer.appendChild(generatedCssCopyBtn); } const box = document.querySelector("#box"); const boxContainer = document.querySelector(".box-container"); const boxBackground = document.querySelector("#box-background"); const boxContainerBackground = document.querySelector("#box-container-background"); const generatedCss = document.querySelector("#generated-css"); const settings = document.querySelectorAll(".settings input"); const hOffset = document.querySelector("#h-offset"); const vOffset = document.querySelector("#v-offset"); const blurRadius = document.querySelector("#blur-radius"); const spreadRadius = document.querySelector("#spread-radius"); const color = document.querySelector("#color"); const opacity = document.querySelector("#opacity"); const inset = document.querySelector("#inset"); boxBackground.addEventListener("input", event => { box.style.backgroundColor = event.currentTarget.value; }); boxContainerBackground.addEventListener("input", event => { boxContainer.style.backgroundColor = event.currentTarget.value; }); settings.forEach(setting => { setting.addEventListener("input", updateBoxShadow); }); function updateBoxShadow(event) { if(event.currentTarget===blurRadius) { if(blurRadius.value<0) blurRadius.value = 0; } if(event.currentTarget===opacity) { if(opacity.value<0) opacity.value = 0; if(opacity.value>1) opacity.value = 1; } const boxShadow = `${hOffset.value}px ${vOffset.value}px ${blurRadius.value}px ${spreadRadius.value}px rgba(${hexToRGB(color.value).join(", ")}, ${opacity.value})${inset.checked ? " inset" : ""}`; box.style.boxShadow = boxShadow; generatedCss.textContent = `box-shadow: ${boxShadow};`; } // Copy to Clipboard (using the Clipboard API which is available on the navigator.clipboard object) if (navigator.clipboard) { const generatedCssCopyBtn = document.querySelector("#generated-css-copy-btn"); generatedCssCopyBtn.addEventListener("click", generatedCssCopyBtnClick); function generatedCssCopyBtnClick() { generatedCssCopyBtn.disabled = true; navigator.clipboard.writeText(generatedCss.textContent).then(function() { /* clipboard successfully set */ generatedCssCopyBtn.textContent = "Copied!"; generatedCssCopyBtn.classList.add("success"); setTimeout(() => { generatedCssCopyBtn.classList.remove("success"); generatedCssCopyBtn.textContent = "Copy"; generatedCssCopyBtn.disabled = false; }, 1000); }, function() { /* clipboard write failed */ generatedCssCopyBtn.textContent = "Error"; generatedCssCopyBtn.classList.add("error"); setTimeout(() => { generatedCssCopyBtn.classList.remove("error"); generatedCssCopyBtn.textContent = "Copy"; generatedCssCopyBtn.disabled = false; }, 1000); }); } } // Auxiliary Functions function hexToRGB(h) { let r = 0; let g = 0; let b = 0; // 3 digits if (h.length == 4) { r = "0x" + h[1] + h[1]; g = "0x" + h[2] + h[2]; b = "0x" + h[3] + h[3]; // 6 digits } else if (h.length == 7) { r = "0x" + h[1] + h[2]; g = "0x" + h[3] + h[4]; b = "0x" + h[5] + h[6]; } return [+r, +g, +b]; // return `rgb(${+r}, ${+g}, ${+b})`; } |
That’s It. Now you have successfully created JavaScript Box Shadow Editor With Copy To Clipboard Values Feature. If you need help with fixing any JavaScript errors you can check the largest JavaScript errors database. & If you have any doubt or question comment down below.
Thanks For Visiting, Keep Visiting.
Thanks a lot bro