{"id":4424,"date":"2025-05-22T09:50:01","date_gmt":"2025-05-22T09:50:01","guid":{"rendered":"https:\/\/ingenio.vip\/?post_type=tools-pages&#038;p=4424"},"modified":"2025-05-29T15:48:21","modified_gmt":"2025-05-29T15:48:21","slug":"box-shadow-generator","status":"publish","type":"tools-pages","link":"https:\/\/ingenio.vip\/zh\/tools-pages\/box-shadow-generator\/","title":{"rendered":"Box Shadow Generator"},"content":{"rendered":"<div class=\"ingenio-tool box-shadow-generator-wrapper\" role=\"region\" aria-labelledby=\"box-shadow-generator-title\">\r\n  <div class=\"box-shadow-generator\">\r\n    <h2 id=\"box-shadow-generator-title\">\ud83c\udf04 Box Shadow Generator<\/h2>\r\n    \r\n    <div class=\"generator-container\">\r\n      <div class=\"controls-section\">\r\n        <div class=\"control-group\">\r\n          <h3>Shadow Properties<\/h3>\r\n          \r\n          <div class=\"control-row\">\r\n            <label for=\"h-offset\">Horizontal Offset:<\/label>\r\n            <input type=\"range\" id=\"h-offset\" min=\"-50\" max=\"50\" value=\"5\">\r\n            <input type=\"number\" id=\"h-offset-value\" min=\"-50\" max=\"50\" value=\"5\">\r\n            <span>px<\/span>\r\n          <\/div>\r\n          \r\n          <div class=\"control-row\">\r\n            <label for=\"v-offset\">Vertical Offset:<\/label>\r\n            <input type=\"range\" id=\"v-offset\" min=\"-50\" max=\"50\" value=\"5\">\r\n            <input type=\"number\" id=\"v-offset-value\" min=\"-50\" max=\"50\" value=\"5\">\r\n            <span>px<\/span>\r\n          <\/div>\r\n          \r\n          <div class=\"control-row\">\r\n            <label for=\"blur\">Blur Radius:<\/label>\r\n            <input type=\"range\" id=\"blur\" min=\"0\" max=\"50\" value=\"10\">\r\n            <input type=\"number\" id=\"blur-value\" min=\"0\" max=\"50\" value=\"10\">\r\n            <span>px<\/span>\r\n          <\/div>\r\n          \r\n          <div class=\"control-row\">\r\n            <label for=\"spread\">Spread:<\/label>\r\n            <input type=\"range\" id=\"spread\" min=\"-50\" max=\"50\" value=\"0\">\r\n            <input type=\"number\" id=\"spread-value\" min=\"-50\" max=\"50\" value=\"0\">\r\n            <span>px<\/span>\r\n          <\/div>\r\n          \r\n          <div class=\"control-row\">\r\n            <label for=\"shadow-color\">Color:<\/label>\r\n            <input type=\"color\" id=\"shadow-color\" value=\"#000000\">\r\n            <input type=\"text\" id=\"shadow-color-value\" value=\"#000000\">\r\n          <\/div>\r\n          \r\n          <div class=\"control-row\">\r\n            <label for=\"opacity\">Opacity:<\/label>\r\n            <input type=\"range\" id=\"opacity\" min=\"0\" max=\"100\" value=\"75\">\r\n            <input type=\"number\" id=\"opacity-value\" min=\"0\" max=\"100\" value=\"75\">\r\n            <span>%<\/span>\r\n          <\/div>\r\n          \r\n          <div class=\"control-row checkbox-row\">\r\n            <label>\r\n              <input type=\"checkbox\" id=\"inset\">\r\n              <span>Inset Shadow<\/span>\r\n            <\/label>\r\n          <\/div>\r\n          \r\n          <div class=\"control-row\">\r\n            <label for=\"shadow-count\">Shadow Count:<\/label>\r\n            <select id=\"shadow-count\">\r\n              <option value=\"1\">1 Shadow<\/option>\r\n              <option value=\"2\">2 Shadows<\/option>\r\n              <option value=\"3\">3 Shadows<\/option>\r\n            <\/select>\r\n          <\/div>\r\n        <\/div>\r\n        \r\n        <div class=\"control-group\">\r\n          <h3>Box Properties<\/h3>\r\n          \r\n          <div class=\"control-row\">\r\n            <label for=\"box-width\">Width:<\/label>\r\n            <input type=\"range\" id=\"box-width\" min=\"50\" max=\"500\" value=\"200\">\r\n            <input type=\"number\" id=\"box-width-value\" min=\"50\" max=\"500\" value=\"200\">\r\n            <span>px<\/span>\r\n          <\/div>\r\n          \r\n          <div class=\"control-row\">\r\n            <label for=\"box-height\">Height:<\/label>\r\n            <input type=\"range\" id=\"box-height\" min=\"50\" max=\"500\" value=\"150\">\r\n            <input type=\"number\" id=\"box-height-value\" min=\"50\" max=\"500\" value=\"150\">\r\n            <span>px<\/span>\r\n          <\/div>\r\n          \r\n          <div class=\"control-row\">\r\n            <label for=\"box-color\">Background:<\/label>\r\n            <input type=\"color\" id=\"box-color\" value=\"#ffffff\">\r\n            <input type=\"text\" id=\"box-color-value\" value=\"#ffffff\">\r\n          <\/div>\r\n          \r\n          <div class=\"control-row\">\r\n            <label for=\"box-border\">Border Radius:<\/label>\r\n            <input type=\"range\" id=\"box-border\" min=\"0\" max=\"100\" value=\"0\">\r\n            <input type=\"number\" id=\"box-border-value\" min=\"0\" max=\"100\" value=\"0\">\r\n            <span>px<\/span>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n      \r\n      <div class=\"preview-section\">\r\n        <div class=\"preview-container\">\r\n          <div id=\"box-preview\" class=\"box-preview\"><\/div>\r\n        <\/div>\r\n        \r\n        <div class=\"code-output\">\r\n          <h3>CSS Code<\/h3>\r\n          <textarea id=\"css-code\" readonly>box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.75);<\/textarea>\r\n          <div class=\"code-actions\">\r\n            <button id=\"copy-css\" class=\"action-btn\">\ud83d\udccb Copy CSS<\/button>\r\n            <button id=\"reset-all\" class=\"action-btn\">\ud83d\udd04 Reset<\/button>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n    \r\n    <div class=\"presets-section\">\r\n      <h3>Shadow Presets<\/h3>\r\n      <div class=\"preset-grid\">\r\n        <div class=\"preset-card\" data-preset=\"0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)\">\r\n          <div class=\"preset-preview\" style=\"box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);\"><\/div>\r\n          <div class=\"preset-name\">Subtle<\/div>\r\n        <\/div>\r\n        <div class=\"preset-card\" data-preset=\"0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)\">\r\n          <div class=\"preset-preview\" style=\"box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);\"><\/div>\r\n          <div class=\"preset-name\">Regular<\/div>\r\n        <\/div>\r\n        <div class=\"preset-card\" data-preset=\"0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)\">\r\n          <div class=\"preset-preview\" style=\"box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);\"><\/div>\r\n          <div class=\"preset-name\">Lifted<\/div>\r\n        <\/div>\r\n        <div class=\"preset-card\" data-preset=\"0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22)\">\r\n          <div class=\"preset-preview\" style=\"box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);\"><\/div>\r\n          <div class=\"preset-name\">Floating<\/div>\r\n        <\/div>\r\n        <div class=\"preset-card\" data-preset=\"0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22)\">\r\n          <div class=\"preset-preview\" style=\"box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);\"><\/div>\r\n          <div class=\"preset-name\">Elevated<\/div>\r\n        <\/div>\r\n        <div class=\"preset-card\" data-preset=\"inset 0 0 10px rgba(0,0,0,0.5)\">\r\n          <div class=\"preset-preview\" style=\"box-shadow: inset 0 0 10px rgba(0,0,0,0.5);\"><\/div>\r\n          <div class=\"preset-name\">Inset<\/div>\r\n        <\/div>\r\n        <div class=\"preset-card\" data-preset=\"0 0 0 5px rgba(0,0,0,0.2)\">\r\n          <div class=\"preset-preview\" style=\"box-shadow: 0 0 0 5px rgba(0,0,0,0.2);\"><\/div>\r\n          <div class=\"preset-name\">Outline<\/div>\r\n        <\/div>\r\n        <div class=\"preset-card\" data-preset=\"5px 5px 0 0 rgba(0,0,0,0.75)\">\r\n          <div class=\"preset-preview\" style=\"box-shadow: 5px 5px 0 0 rgba(0,0,0,0.75);\"><\/div>\r\n          <div class=\"preset-name\">Solid<\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n    \r\n    <div class=\"box-shadow-info\">\r\n      <h3>\u2139\ufe0f About Box Shadows<\/h3>\r\n      <div class=\"info-content\">\r\n        <p>The <code>box-shadow<\/code> CSS property adds shadow effects around an element's frame. You can set multiple effects separated by commas.<\/p>\r\n        <p>Each shadow is specified as:<\/p>\r\n        <pre>box-shadow: [inset] [h-offset] [v-offset] [blur] [spread] [color];<\/pre>\r\n        <ul>\r\n          <li><strong>inset<\/strong>: Changes the shadow from outer to inner<\/li>\r\n          <li><strong>h-offset<\/strong>: Horizontal distance (positive = right, negative = left)<\/li>\r\n          <li><strong>v-offset<\/strong>: Vertical distance (positive = down, negative = up)<\/li>\r\n          <li><strong>blur<\/strong>: The larger the value, the bigger the blur (0 = sharp)<\/li>\r\n          <li><strong>spread<\/strong>: Positive = expand, negative = contract<\/li>\r\n          <li><strong>color<\/strong>: Shadow color (with opacity)<\/li>\r\n        <\/ul>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<style>\r\n  .box-shadow-generator-wrapper {\r\n    background-color: var(--bg, #f5f5fa);\r\n    padding: 1rem;\r\n  }\r\n\r\n  .box-shadow-generator {\r\n    max-width: 1200px;\r\n    margin: auto;\r\n    background: var(--bg, #fff);\r\n    border-radius: 10px;\r\n    padding: 25px;\r\n    box-shadow: 0 4px 12px rgba(0,0,0,0.08);\r\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif;\r\n  }\r\n\r\n  .box-shadow-generator h2 {\r\n    text-align: center;\r\n    font-size: 1.8rem;\r\n    color: var(--primary, #0a66c2);\r\n    margin-bottom: 1.5rem;\r\n  }\r\n\r\n  .generator-container {\r\n    display: flex;\r\n    gap: 30px;\r\n    margin-bottom: 30px;\r\n    flex-wrap: wrap;\r\n  }\r\n\r\n  .controls-section {\r\n    flex: 1;\r\n    min-width: 300px;\r\n  }\r\n\r\n  .preview-section {\r\n    flex: 1;\r\n    min-width: 300px;\r\n  }\r\n\r\n  .control-group {\r\n    background: #f9f9f9;\r\n    border-radius: 8px;\r\n    padding: 20px;\r\n    margin-bottom: 20px;\r\n  }\r\n\r\n  .control-group h3 {\r\n    margin-top: 0;\r\n    margin-bottom: 15px;\r\n    font-size: 1.1rem;\r\n    color: #333;\r\n  }\r\n\r\n  .control-row {\r\n    display: flex;\r\n    align-items: center;\r\n    margin-bottom: 15px;\r\n  }\r\n\r\n  .control-row label {\r\n    width: 120px;\r\n    font-size: 0.9rem;\r\n  }\r\n\r\n  .control-row input[type=\"range\"] {\r\n    flex: 1;\r\n    margin: 0 10px;\r\n  }\r\n\r\n  .control-row input[type=\"number\"] {\r\n    width: 60px;\r\n    padding: 5px;\r\n    border: 1px solid #ddd;\r\n    border-radius: 4px;\r\n    text-align: center;\r\n  }\r\n\r\n  .control-row input[type=\"color\"] {\r\n    width: 40px;\r\n    height: 30px;\r\n    padding: 2px;\r\n    border: 1px solid #ddd;\r\n    border-radius: 4px;\r\n    margin-right: 10px;\r\n  }\r\n\r\n  .control-row input[type=\"text\"] {\r\n    width: 100px;\r\n    padding: 5px;\r\n    border: 1px solid #ddd;\r\n    border-radius: 4px;\r\n  }\r\n\r\n  .control-row span {\r\n    font-size: 0.9rem;\r\n    color: #666;\r\n    margin-left: 5px;\r\n  }\r\n\r\n  .control-row select {\r\n    flex: 1;\r\n    padding: 8px;\r\n    border: 1px solid #ddd;\r\n    border-radius: 4px;\r\n  }\r\n\r\n  .checkbox-row {\r\n    margin-top: 20px;\r\n  }\r\n\r\n  .checkbox-row label {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    cursor: pointer;\r\n    width: auto;\r\n  }\r\n\r\n  .preview-container {\r\n    background: #f5f5f5;\r\n    border-radius: 8px;\r\n    padding: 40px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    margin-bottom: 20px;\r\n    min-height: 200px;\r\n  }\r\n\r\n  .box-preview {\r\n    width: 200px;\r\n    height: 150px;\r\n    background: #ffffff;\r\n    box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.75);\r\n  }\r\n\r\n  .code-output {\r\n    background: #f9f9f9;\r\n    border-radius: 8px;\r\n    padding: 20px;\r\n  }\r\n\r\n  .code-output h3 {\r\n    margin-top: 0;\r\n    margin-bottom: 15px;\r\n    font-size: 1.1rem;\r\n  }\r\n\r\n  #css-code {\r\n    width: 100%;\r\n    min-height: 80px;\r\n    padding: 10px;\r\n    border: 1px solid #ddd;\r\n    border-radius: 6px;\r\n    font-family: monospace;\r\n    font-size: 0.9rem;\r\n    resize: vertical;\r\n    background: #fff;\r\n  }\r\n\r\n  .code-actions {\r\n    display: flex;\r\n    gap: 10px;\r\n    margin-top: 15px;\r\n  }\r\n\r\n  .action-btn {\r\n    padding: 8px 15px;\r\n    border: none;\r\n    border-radius: 4px;\r\n    background: #e0e0e0;\r\n    cursor: pointer;\r\n    font-size: 0.9rem;\r\n    transition: all 0.2s;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 5px;\r\n  }\r\n\r\n  .action-btn:hover {\r\n    background: #d0d0d0;\r\n  }\r\n\r\n  .presets-section {\r\n    margin-bottom: 30px;\r\n  }\r\n\r\n  .presets-section h3 {\r\n    margin-top: 0;\r\n    margin-bottom: 15px;\r\n    font-size: 1.2rem;\r\n  }\r\n\r\n  .preset-grid {\r\n    display: grid;\r\n    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));\r\n    gap: 15px;\r\n  }\r\n\r\n  .preset-card {\r\n    background: white;\r\n    border-radius: 8px;\r\n    padding: 15px;\r\n    box-shadow: 0 1px 3px rgba(0,0,0,0.1);\r\n    cursor: pointer;\r\n    transition: all 0.2s;\r\n  }\r\n\r\n  .preset-card:hover {\r\n    transform: translateY(-3px);\r\n    box-shadow: 0 4px 8px rgba(0,0,0,0.1);\r\n  }\r\n\r\n  .preset-preview {\r\n    width: 100%;\r\n    height: 80px;\r\n    background: #ffffff;\r\n    margin-bottom: 10px;\r\n    border-radius: 4px;\r\n  }\r\n\r\n  .preset-name {\r\n    text-align: center;\r\n    font-size: 0.9rem;\r\n    font-weight: 500;\r\n  }\r\n\r\n  .box-shadow-info {\r\n    background: #f9f9f9;\r\n    border-radius: 8px;\r\n    padding: 20px;\r\n  }\r\n\r\n  .box-shadow-info h3 {\r\n    margin-top: 0;\r\n    margin-bottom: 15px;\r\n    font-size: 1.2rem;\r\n  }\r\n\r\n  .info-content {\r\n    font-size: 0.9rem;\r\n    line-height: 1.6;\r\n  }\r\n\r\n  .info-content p {\r\n    margin-top: 0;\r\n  }\r\n\r\n  .info-content pre {\r\n    background: #2d2d2d;\r\n    color: #f8f8f2;\r\n    padding: 10px;\r\n    border-radius: 4px;\r\n    overflow-x: auto;\r\n    font-family: monospace;\r\n    font-size: 0.85rem;\r\n  }\r\n\r\n  .info-content ul {\r\n    margin: 10px 0;\r\n    padding-left: 20px;\r\n  }\r\n\r\n  .info-content li {\r\n    margin-bottom: 8px;\r\n  }\r\n\r\n  @media (max-width: 768px) {\r\n    .generator-container {\r\n      flex-direction: column;\r\n    }\r\n    \r\n    .controls-section, .preview-section {\r\n      min-width: 100%;\r\n    }\r\n    \r\n    .preset-grid {\r\n      grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));\r\n    }\r\n  }\r\n<\/style>\r\n\r\n<script>\r\ndocument.addEventListener(\"DOMContentLoaded\", function() {\r\n  \/\/ DOM elements\r\n  const hOffsetSlider = document.getElementById('h-offset');\r\n  const hOffsetValue = document.getElementById('h-offset-value');\r\n  const vOffsetSlider = document.getElementById('v-offset');\r\n  const vOffsetValue = document.getElementById('v-offset-value');\r\n  const blurSlider = document.getElementById('blur');\r\n  const blurValue = document.getElementById('blur-value');\r\n  const spreadSlider = document.getElementById('spread');\r\n  const spreadValue = document.getElementById('spread-value');\r\n  const shadowColor = document.getElementById('shadow-color');\r\n  const shadowColorValue = document.getElementById('shadow-color-value');\r\n  const opacitySlider = document.getElementById('opacity');\r\n  const opacityValue = document.getElementById('opacity-value');\r\n  const insetCheckbox = document.getElementById('inset');\r\n  const shadowCount = document.getElementById('shadow-count');\r\n  \r\n  const boxWidthSlider = document.getElementById('box-width');\r\n  const boxWidthValue = document.getElementById('box-width-value');\r\n  const boxHeightSlider = document.getElementById('box-height');\r\n  const boxHeightValue = document.getElementById('box-height-value');\r\n  const boxColor = document.getElementById('box-color');\r\n  const boxColorValue = document.getElementById('box-color-value');\r\n  const boxBorderSlider = document.getElementById('box-border');\r\n  const boxBorderValue = document.getElementById('box-border-value');\r\n  \r\n  const boxPreview = document.getElementById('box-preview');\r\n  const cssCode = document.getElementById('css-code');\r\n  const copyCssBtn = document.getElementById('copy-css');\r\n  const resetAllBtn = document.getElementById('reset-all');\r\n  \r\n  const presetCards = document.querySelectorAll('.preset-card');\r\n  \r\n  \/\/ Initialize linked inputs\r\n  linkInputs(hOffsetSlider, hOffsetValue);\r\n  linkInputs(vOffsetSlider, vOffsetValue);\r\n  linkInputs(blurSlider, blurValue);\r\n  linkInputs(spreadSlider, spreadValue);\r\n  linkInputs(opacitySlider, opacityValue);\r\n  linkInputs(boxWidthSlider, boxWidthValue);\r\n  linkInputs(boxHeightSlider, boxHeightValue);\r\n  linkInputs(boxBorderSlider, boxBorderValue);\r\n  linkInputs(shadowColor, shadowColorValue);\r\n  linkInputs(boxColor, boxColorValue);\r\n  \r\n  \/\/ Update preview when any control changes\r\n  const allControls = [\r\n    hOffsetSlider, hOffsetValue,\r\n    vOffsetSlider, vOffsetValue,\r\n    blurSlider, blurValue,\r\n    spreadSlider, spreadValue,\r\n    shadowColor, shadowColorValue,\r\n    opacitySlider, opacityValue,\r\n    insetCheckbox,\r\n    shadowCount,\r\n    boxWidthSlider, boxWidthValue,\r\n    boxHeightSlider, boxHeightValue,\r\n    boxColor, boxColorValue,\r\n    boxBorderSlider, boxBorderValue\r\n  ];\r\n  \r\n  allControls.forEach(control => {\r\n    control.addEventListener('input', updatePreview);\r\n  });\r\n  \r\n  \/\/ Preset cards\r\n  presetCards.forEach(card => {\r\n    card.addEventListener('click', function() {\r\n      const preset = this.dataset.preset;\r\n      applyPreset(preset);\r\n    });\r\n  });\r\n  \r\n  \/\/ Copy CSS button\r\n  copyCssBtn.addEventListener('click', function() {\r\n    cssCode.select();\r\n    document.execCommand('copy');\r\n    \r\n    \/\/ Show feedback\r\n    const originalText = copyCssBtn.innerHTML;\r\n    copyCssBtn.innerHTML = '\u2705 Copied!';\r\n    setTimeout(() => {\r\n      copyCssBtn.innerHTML = originalText;\r\n    }, 2000);\r\n  });\r\n  \r\n  \/\/ Reset all button\r\n  resetAllBtn.addEventListener('click', function() {\r\n    hOffsetSlider.value = 5;\r\n    hOffsetValue.value = 5;\r\n    vOffsetSlider.value = 5;\r\n    vOffsetValue.value = 5;\r\n    blurSlider.value = 10;\r\n    blurValue.value = 10;\r\n    spreadSlider.value = 0;\r\n    spreadValue.value = 0;\r\n    shadowColor.value = '#000000';\r\n    shadowColorValue.value = '#000000';\r\n    opacitySlider.value = 75;\r\n    opacityValue.value = 75;\r\n    insetCheckbox.checked = false;\r\n    shadowCount.value = 1;\r\n    \r\n    boxWidthSlider.value = 200;\r\n    boxWidthValue.value = 200;\r\n    boxHeightSlider.value = 150;\r\n    boxHeightValue.value = 150;\r\n    boxColor.value = '#ffffff';\r\n    boxColorValue.value = '#ffffff';\r\n    boxBorderSlider.value = 0;\r\n    boxBorderValue.value = 0;\r\n    \r\n    updatePreview();\r\n  });\r\n  \r\n  \/\/ Link slider and number inputs\r\n  function linkInputs(slider, number) {\r\n    slider.addEventListener('input', function() {\r\n      number.value = this.value;\r\n    });\r\n    \r\n    number.addEventListener('input', function() {\r\n      slider.value = this.value;\r\n    });\r\n  }\r\n  \r\n  \/\/ Update preview box and CSS code\r\n  function updatePreview() {\r\n    const count = parseInt(shadowCount.value);\r\n    let shadows = [];\r\n    \r\n    for (let i = 0; i < count; i++) {\r\n      const hOffset = parseInt(hOffsetSlider.value);\r\n      const vOffset = parseInt(vOffsetSlider.value);\r\n      const blur = parseInt(blurSlider.value);\r\n      const spread = parseInt(spreadSlider.value);\r\n      const color = shadowColor.value;\r\n      const opacity = parseInt(opacitySlider.value) \/ 100;\r\n      const inset = insetCheckbox.checked ? 'inset ' : '';\r\n      \r\n      \/\/ Convert hex to rgba with opacity\r\n      const rgbColor = hexToRgb(color);\r\n      const rgbaColor = `rgba(${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}, ${opacity})`;\r\n      \r\n      shadows.push(`${inset}${hOffset}px ${vOffset}px ${blur}px ${spread}px ${rgbaColor}`);\r\n    }\r\n    \r\n    \/\/ Update box preview\r\n    const boxWidth = parseInt(boxWidthSlider.value);\r\n    const boxHeight = parseInt(boxHeightSlider.value);\r\n    const boxBgColor = boxColor.value;\r\n    const borderRadius = parseInt(boxBorderSlider.value);\r\n    \r\n    boxPreview.style.width = `${boxWidth}px`;\r\n    boxPreview.style.height = `${boxHeight}px`;\r\n    boxPreview.style.backgroundColor = boxBgColor;\r\n    boxPreview.style.borderRadius = `${borderRadius}px`;\r\n    boxPreview.style.boxShadow = shadows.join(', ');\r\n    \r\n    \/\/ Update CSS code\r\n    cssCode.value = `box-shadow: ${shadows.join(', ')};`;\r\n    \r\n    \/\/ If border radius is set, add to CSS\r\n    if (borderRadius > 0) {\r\n      cssCode.value += `\\nborder-radius: ${borderRadius}px;`;\r\n    }\r\n  }\r\n  \r\n  \/\/ Apply preset\r\n  function applyPreset(preset) {\r\n    \/\/ Reset to single shadow\r\n    shadowCount.value = preset.includes(',') ? '2' : '1';\r\n    \r\n    \/\/ Parse the preset\r\n    const shadows = preset.split(', ');\r\n    const firstShadow = shadows[0];\r\n    \r\n    \/\/ Extract values from shadow string\r\n    const shadowParts = firstShadow.split(\/\\s+\/);\r\n    let inset = false;\r\n    let parts = [...shadowParts];\r\n    \r\n    if (shadowParts[0] === 'inset') {\r\n      inset = true;\r\n      parts = shadowParts.slice(1);\r\n    }\r\n    \r\n    const hOffset = parseInt(parts[0]);\r\n    const vOffset = parseInt(parts[1]);\r\n    const blur = parseInt(parts[2]);\r\n    const spread = parseInt(parts[3]);\r\n    const color = parts[4].startsWith('rgba') ? \r\n      rgbaToHex(parts[4]) : \r\n      parts[4];\r\n    \r\n    \/\/ Get opacity from rgba if present\r\n    let opacity = 75;\r\n    if (parts[4].startsWith('rgba')) {\r\n      const opacityMatch = parts[4].match(\/[\\d.]+\\)$\/);\r\n      if (opacityMatch) {\r\n        opacity = Math.round(parseFloat(opacityMatch[0]) * 100);\r\n      }\r\n    }\r\n    \r\n    \/\/ Update controls\r\n    hOffsetSlider.value = hOffset;\r\n    hOffsetValue.value = hOffset;\r\n    vOffsetSlider.value = vOffset;\r\n    vOffsetValue.value = vOffset;\r\n    blurSlider.value = blur;\r\n    blurValue.value = blur;\r\n    spreadSlider.value = spread;\r\n    spreadValue.value = spread;\r\n    shadowColor.value = color;\r\n    shadowColorValue.value = color;\r\n    opacitySlider.value = opacity;\r\n    opacityValue.value = opacity;\r\n    insetCheckbox.checked = inset;\r\n    \r\n    updatePreview();\r\n  }\r\n  \r\n  \/\/ Helper function to convert hex to rgb\r\n  function hexToRgb(hex) {\r\n    \/\/ Remove # if present\r\n    hex = hex.replace('#', '');\r\n    \r\n    \/\/ Parse r, g, b values\r\n    const r = parseInt(hex.substring(0, 2), 16);\r\n    const g = parseInt(hex.substring(2, 4), 16);\r\n    const b = parseInt(hex.substring(4, 6), 16);\r\n    \r\n    return { r, g, b };\r\n  }\r\n  \r\n  \/\/ Helper function to convert rgba to hex\r\n  function rgbaToHex(rgba) {\r\n    const parts = rgba.match(\/[\\d.]+\/g);\r\n    const r = Math.round(parseFloat(parts[0])).toString(16).padStart(2, '0');\r\n    const g = Math.round(parseFloat(parts[1])).toString(16).padStart(2, '0');\r\n    const b = Math.round(parseFloat(parts[2])).toString(16).padStart(2, '0');\r\n    \r\n    return `#${r}${g}${b}`;\r\n  }\r\n  \r\n  \/\/ Initial update\r\n  updatePreview();\r\n});\r\n<\/script>\n\n\n\n<h2 class=\"wp-block-heading\">\ud83c\udfaf Box Shadow Generator<\/h2>\n\n\n\n<p>Want to make your elements <em>pop<\/em> without writing a line of CSS?<br><strong>Box Shadow Generator<\/strong> lets you create beautiful, clean, and customizable CSS box shadows with zero guesswork and full live preview.<\/p>\n\n\n\n<p>No more guessing hex codes or fiddling with <code>rgba()<\/code> in the dark.<br>This tool makes your UI design look <strong>pro<\/strong>, even if you&#8217;re still figuring out flexbox.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\ud83e\uddf0 What It Does<\/h2>\n\n\n\n<p>Design and preview stunning CSS box shadows in real time with fully customizable settings:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\ud83d\udd32 <strong>Offset X \/ Y<\/strong> \u2013 Move the shadow horizontally or vertically<\/li>\n\n\n\n<li>\ud83c\udf2b\ufe0f <strong>Blur Radius<\/strong> \u2013 Control the softness of the shadow<\/li>\n\n\n\n<li>\ud83c\udf11 <strong>Spread Radius<\/strong> \u2013 Make it bolder or tighter<\/li>\n\n\n\n<li>\ud83c\udfa8 <strong>Shadow Color Picker<\/strong> \u2013 Full HEX\/RGBA support with opacity<\/li>\n\n\n\n<li>\ud83d\udccb <strong>Copy-Ready CSS Output<\/strong> \u2013 Paste it directly into your styles<\/li>\n\n\n\n<li>\ud83c\udf13 <strong>Inset Option<\/strong> \u2013 Toggle between outer and inner shadows<\/li>\n\n\n\n<li>\ud83d\udcbb <strong>Live Preview Panel<\/strong> \u2013 See exactly how your element will look<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\ud83d\udc68\u200d\ud83c\udfa8 Who It\u2019s For<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Web designers<\/strong> perfecting a button, card, or modal<\/li>\n\n\n\n<li><strong>Frontend devs<\/strong> who don&#8217;t want to open Figma for every tweak<\/li>\n\n\n\n<li><strong>UI\/UX teams<\/strong> needing fast prototyping tools<\/li>\n\n\n\n<li><strong>Non-coders<\/strong> who still want gorgeous effects<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u2728 Why You\u2019ll Love It<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u2705 <strong>Real-time updates<\/strong> \u2014 no refresh, no delay<\/li>\n\n\n\n<li>\ud83c\udf17 <strong>Dark mode friendly<\/strong> \u2014 design day or night<\/li>\n\n\n\n<li>\ud83d\udcf1 <strong>Responsive<\/strong> \u2014 works beautifully on desktop and mobile<\/li>\n\n\n\n<li>\ud83d\udd10 <strong>No data saved or tracked<\/strong> \u2014 100% privacy-friendly<\/li>\n\n\n\n<li>\ud83c\udf81 <strong>Part of the Ingenio Tools suite<\/strong> \u2014 so it fits right in with your toolbox<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\ud83d\ude80 How It Works<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Adjust sliders or input values for each parameter<\/li>\n\n\n\n<li>Watch your element update instantly<\/li>\n\n\n\n<li>Click <strong>\u201cCopy CSS\u201d<\/strong> \u2014 and you\u2019re done.<\/li>\n\n\n\n<li>Go impress your team, client, or your cat \ud83d\udc08<\/li>\n<\/ol>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\ud83d\udca1 Pro Tip<\/h2>\n\n\n\n<p>Combine shadows with gradients or glassmorphism styles for that <strong>modern, buttery-smooth UI<\/strong>.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\ud83d\udc47 Try It Now<\/h2>\n\n\n\n<p>Design perfect shadows without touching a code editor.<\/p>","protected":false},"excerpt":{"rendered":"<p>\ud83c\udf04 Box Shadow Generator Shadow Properties Horizontal Offset: px Vertical Offset: px Blur Radius: px Spread: px Color: Opacity: % Inset Shadow Shadow Count: 1 Shadow 2 Shadows 3 Shadows Box Properties Width: px Height: px Background: Border Radius: px CSS Code box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.75); \ud83d\udccb Copy CSS \ud83d\udd04 [&hellip;]<\/p>\n<\/p><div class=\"more-link\"><a href=\"https:\/\/ingenio.vip\/zh\/tools-pages\/box-shadow-generator\/\" class=\"btn btn-small btn--dark btn-hover-shadow\"><span class=\"text\">Continue Reading<\/span><i class=\"seoicon-right-arrow\"><\/i><\/a><\/div>","protected":false},"author":1,"featured_media":0,"menu_order":0,"template":"elementor_header_footer","meta":{"_acf_changed":false,"googlesitekit_rrm_CAowrpbbCw:productID":"","footnotes":""},"tools-categories":[],"class_list":["post-4424","tools-pages","type-tools-pages","status-publish","hentry"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/ingenio.vip\/zh\/wp-json\/wp\/v2\/tools-pages\/4424","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ingenio.vip\/zh\/wp-json\/wp\/v2\/tools-pages"}],"about":[{"href":"https:\/\/ingenio.vip\/zh\/wp-json\/wp\/v2\/types\/tools-pages"}],"author":[{"embeddable":true,"href":"https:\/\/ingenio.vip\/zh\/wp-json\/wp\/v2\/users\/1"}],"version-history":[{"count":1,"href":"https:\/\/ingenio.vip\/zh\/wp-json\/wp\/v2\/tools-pages\/4424\/revisions"}],"predecessor-version":[{"id":4425,"href":"https:\/\/ingenio.vip\/zh\/wp-json\/wp\/v2\/tools-pages\/4424\/revisions\/4425"}],"wp:attachment":[{"href":"https:\/\/ingenio.vip\/zh\/wp-json\/wp\/v2\/media?parent=4424"}],"wp:term":[{"taxonomy":"tools-categories","embeddable":true,"href":"https:\/\/ingenio.vip\/zh\/wp-json\/wp\/v2\/tools-categories?post=4424"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}