Box Shadow Generator

Box Shadow Generator

<style>
.box-shadow-generator {
  font-family: "Roboto", sans-serif;
  width: 100%;
  height:100%;
  box-shadow: 0 0 40px -8px rgba(0, 0, 0, 0.3);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.box-shadow-generator,
.box-shadow-generator * {
  box-sizing: border-box;
}

.box-shadow-generator .controls {
  padding: 8px;
  width: 300px;
}

.box-shadow-generator .controls h2 {
  font-size: 10px;
  margin: 4px 0;
  font-weight: normal;
}

.box-shadow-generator .controls .group {
  padding: 2px 4px;
  margin: 8px 0;
}

.box-shadow-generator .controls .container {
  display: flex;
  justify-content: space-between;
}

.box-shadow-generator .controls .control {
  width: 100%;
}

.box-shadow-generator .controls input[type="color"] {
  width: 50px;
  height: 50px;
}

.box-shadow-generator .result {
  max-width:50%;
  
  padding:2px 2px;
  left:3px;
}

.box-shadow-generator .result .box {
  width: 90%;
  height: 100px;
  background: #fff;
  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.3);
  margin-bottom: 3px;
  margin-top:3px;
  left: 3px;
}

.box-shadow-generator .result .generate-code-btn {
  position: absolute;
  bottom: 3px;
  right: 3px;
  width:150px;
  padding: 4px 8px;
  font-size: 18px;
  font-weight: bold;
  border: none;
  background: #e63946;
  color: #fff;
  cursor: pointer;
}
</style>
<link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;400&display=swap"
      rel="stylesheet"
    />

    <link
      rel="stylesheet"
      href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/styles/atom-one-dark.min.css"
    />
    
  
  
    <h1>Box Shadow Generator</h1>

    <div class="box-shadow-generator">
      <div class="controls">
        <div class="group">
          <h2>X Offset</h2>
          <input
            type="range"
            min="-50"
            max="50"
            value="0"
            step="1"
            class="control"
            id="x-value"
          />
        </div>

        <div class="group">
          <h2>Y Offset</h2>
          <input
            type="range"
            min="-50"
            max="50"
            value="0"
            step="1"
            class="control"
            id="y-value"
          />
        </div>

        <div class="group">
          <h2>Blur Radius</h2>
          <input
            type="range"
            min="0"
            max="50"
            value="6"
            step="1"
            class="control"
            id="blur"
          />
        </div>

        <div class="group">
          <h2>Spread Radius</h2>
          <input
            type="range"
            min="-50"
            max="50"
            value="0"
            step="1"
            class="control"
            id="spread"
          />
        </div>

        <div class="group">
          <h2>Opacity</h2>
          <input
            type="range"
            min="0"
            max="1"
            value="0.3"
            step="0.1"
            class="control"
            id="opacity"
          />
        </div>

        <div class="container">
          <div class="group">
            <h2>Color</h2>
            <input type="color" class="control" id="color" />
          </div>

          <div class="group">
            <h2>Inset</h2>
            <input type="checkbox" class="control" id="inset" />
          </div>
        </div>
      </div>

      <div class="result">
        <div class="box"></div>
        <div class="code">
          <pre>
            <code>box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.3);</code>
          </pre>
        </div>
        <button class="generate-code-btn">Generate Code</button>
      </div>
    </div>

    <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>

    <script>
      hljs.highlightAll();
    </script>

<script>
const box = document.querySelector(".box-shadow-generator .box");
const generateCodeBtn = document.querySelector(
  ".box-shadow-generator .generate-code-btn"
);
const code = document.querySelector(".result .code pre code");
const controls = document.querySelectorAll(".box-shadow-generator .control");

let xValue = 0;
let yValue = 0;
let blurValue = 6;
let opacityValue = 0.3;
let spreadValue = 0;
let colorValue = "rgba(0, 0, 0, 0.3)";
let insetValue = false;

const hexToRGBA = (hex) => {
  let r = parseInt(hex.slice(1, 3), 16);
  let g = parseInt(hex.slice(3, 5), 16);
  let b = parseInt(hex.slice(5, 7), 16);

  return `rgba(${r}, ${g}, ${b}, ${opacityValue})`;
};

const generateBoxShadow = () => {
  if (insetValue) {
    box.style.boxShadow = `inset ${xValue}px ${yValue}px ${blurValue}px ${spreadValue}px ${colorValue}`;
  } else {
    box.style.boxShadow = `${xValue}px ${yValue}px ${blurValue}px ${spreadValue}px ${colorValue}`;
  }
};

const updateValues = () => {
  xValue = document.querySelector("#x-value").value;
  yValue = document.querySelector("#y-value").value;
  blurValue = document.querySelector("#blur").value;
  opacityValue = document.querySelector("#opacity").value;
  spreadValue = document.querySelector("#spread").value;
  colorValue = hexToRGBA(document.querySelector("#color").value);
  insetValue = document.querySelector("#inset").checked;

  generateBoxShadow();
};

controls.forEach((c) => {
  c.addEventListener("input", updateValues);
});

const generateCode = () => {
  if (insetValue) {
    code.innerHTML = `box-shadow: inset ${xValue}px ${yValue}px ${blurValue}px ${spreadValue}px ${colorValue}`;
  } else {
    code.innerHTML = `box-shadow: ${xValue}px ${yValue}px ${blurValue}px ${spreadValue}px ${colorValue}`;
  }

  hljs.highlightAll();
};

generateCodeBtn.addEventListener("click", generateCode);
</script>