{"id":4462,"date":"2025-05-24T13:04:55","date_gmt":"2025-05-24T13:04:55","guid":{"rendered":"https:\/\/ingenio.vip\/?post_type=tools-pages&#038;p=4462"},"modified":"2025-05-24T13:05:01","modified_gmt":"2025-05-24T13:05:01","slug":"glassmorphism-neumorphism-generator","status":"publish","type":"tools-pages","link":"https:\/\/ingenio.vip\/zh\/tools-pages\/glassmorphism-neumorphism-generator\/","title":{"rendered":"Glassmorphism \/ Neumorphism Generator"},"content":{"rendered":"<div class=\"morphism-generator\">\r\n  <div class=\"mg-container\">\r\n    <header class=\"mg-header\">\r\n      <h1><span class=\"dashicons dashicons-art\"><\/span> Morphism Effects Generator<\/h1>\r\n      <p class=\"mg-subtitle\">Create stunning Glassmorphism and Neumorphism designs<\/p>\r\n    <\/header>\r\n\r\n    <div class=\"mg-tabs\">\r\n      <button class=\"mg-tab active\" data-tab=\"glass\">Glassmorphism<\/button>\r\n      <button class=\"mg-tab\" data-tab=\"neo\">Neumorphism<\/button>\r\n    <\/div>\r\n\r\n    <div class=\"mg-content\">\r\n      <!-- Glassmorphism Panel -->\r\n      <div class=\"mg-panel active\" id=\"glassPanel\">\r\n        <div class=\"mg-controls\">\r\n          <div class=\"mg-control-group\">\r\n            <label for=\"glassBlur\">Blur Amount<\/label>\r\n            <input type=\"range\" id=\"glassBlur\" min=\"0\" max=\"50\" value=\"10\">\r\n            <span id=\"glassBlurValue\">10px<\/span>\r\n          <\/div>\r\n          \r\n          <div class=\"mg-control-group\">\r\n            <label for=\"glassOpacity\">Opacity<\/label>\r\n            <input type=\"range\" id=\"glassOpacity\" min=\"0\" max=\"100\" value=\"80\">\r\n            <span id=\"glassOpacityValue\">80%<\/span>\r\n          <\/div>\r\n          \r\n          <div class=\"mg-control-group\">\r\n            <label for=\"glassBorder\">Border<\/label>\r\n            <input type=\"range\" id=\"glassBorder\" min=\"0\" max=\"5\" value=\"1\">\r\n            <span id=\"glassBorderValue\">1px<\/span>\r\n          <\/div>\r\n          \r\n          <div class=\"mg-control-group\">\r\n            <label for=\"glassColor\">Base Color<\/label>\r\n            <input type=\"color\" id=\"glassColor\" value=\"#ffffff\">\r\n          <\/div>\r\n          \r\n          <div class=\"mg-control-group\">\r\n            <label for=\"glassBgColor\">Background Color<\/label>\r\n            <input type=\"color\" id=\"glassBgColor\" value=\"#6a11cb\">\r\n          <\/div>\r\n          \r\n          <div class=\"mg-control-group\">\r\n            <label for=\"glassBgGradient\">Gradient Direction<\/label>\r\n            <select id=\"glassBgGradient\">\r\n              <option value=\"to right\">Horizontal<\/option>\r\n              <option value=\"to bottom\">Vertical<\/option>\r\n              <option value=\"to right bottom\">Diagonal<\/option>\r\n              <option value=\"135deg\">135\u00b0 Angle<\/option>\r\n            <\/select>\r\n          <\/div>\r\n        <\/div>\r\n        \r\n        <div class=\"mg-preview\">\r\n          <div class=\"mg-glass-preview\" id=\"glassPreview\">\r\n            <div class=\"mg-glass-card\">\r\n              <h3>Glassmorphism Card<\/h3>\r\n              <p>This transparent effect creates depth with blur and transparency.<\/p>\r\n            <\/div>\r\n          <\/div>\r\n          \r\n          <div class=\"mg-code\">\r\n            <pre><code class=\"language-css\" id=\"glassCode\">\/* Generated CSS will appear here *\/<\/code><\/pre>\r\n            <button class=\"mg-copy-btn\" data-target=\"glassCode\">\r\n              <span class=\"dashicons dashicons-admin-page\"><\/span> Copy CSS\r\n            <\/button>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n      \r\n      <!-- Neumorphism Panel -->\r\n      <div class=\"mg-panel\" id=\"neoPanel\">\r\n        <div class=\"mg-controls\">\r\n          <div class=\"mg-control-group\">\r\n            <label for=\"neoSize\">Effect Size<\/label>\r\n            <input type=\"range\" id=\"neoSize\" min=\"5\" max=\"50\" value=\"15\">\r\n            <span id=\"neoSizeValue\">15px<\/span>\r\n          <\/div>\r\n          \r\n          <div class=\"mg-control-group\">\r\n            <label for=\"neoBlur\">Blur Amount<\/label>\r\n            <input type=\"range\" id=\"neoBlur\" min=\"0\" max=\"50\" value=\"15\">\r\n            <span id=\"neoBlurValue\">15px<\/span>\r\n          <\/div>\r\n          \r\n          <div class=\"mg-control-group\">\r\n            <label for=\"neoDistance\">Shadow Distance<\/label>\r\n            <input type=\"range\" id=\"neoDistance\" min=\"0\" max=\"30\" value=\"10\">\r\n            <span id=\"neoDistanceValue\">10px<\/span>\r\n          <\/div>\r\n          \r\n          <div class=\"mg-control-group\">\r\n            <label for=\"neoColor\">Base Color<\/label>\r\n            <input type=\"color\" id=\"neoColor\" value=\"#e0e5ec\">\r\n          <\/div>\r\n          \r\n          <div class=\"mg-control-group\">\r\n            <label for=\"neoLight\">Light Source<\/label>\r\n            <select id=\"neoLight\">\r\n              <option value=\"top left\">Top Left<\/option>\r\n              <option value=\"top\">Top<\/option>\r\n              <option value=\"top right\">Top Right<\/option>\r\n              <option value=\"left\">Left<\/option>\r\n              <option value=\"right\" selected>Right<\/option>\r\n              <option value=\"bottom left\">Bottom Left<\/option>\r\n              <option value=\"bottom\">Bottom<\/option>\r\n              <option value=\"bottom right\">Bottom Right<\/option>\r\n            <\/select>\r\n          <\/div>\r\n          \r\n          <div class=\"mg-control-group\">\r\n            <label for=\"neoShape\">Shape Style<\/label>\r\n            <select id=\"neoShape\">\r\n              <option value=\"normal\">Normal<\/option>\r\n              <option value=\"pressed\">Pressed<\/option>\r\n              <option value=\"convex\">Convex<\/option>\r\n              <option value=\"concave\">Concave<\/option>\r\n            <\/select>\r\n          <\/div>\r\n        <\/div>\r\n        \r\n        <div class=\"mg-preview\">\r\n          <div class=\"mg-neo-preview\" id=\"neoPreview\">\r\n            <div class=\"mg-neo-card\">\r\n              <h3>Neumorphism Card<\/h3>\r\n              <p>This soft UI effect mimics physical objects with light and shadow.<\/p>\r\n            <\/div>\r\n          <\/div>\r\n          \r\n          <div class=\"mg-code\">\r\n            <pre><code class=\"language-css\" id=\"neoCode\">\/* Generated CSS will appear here *\/<\/code><\/pre>\r\n            <button class=\"mg-copy-btn\" data-target=\"neoCode\">\r\n              <span class=\"dashicons dashicons-admin-page\"><\/span> Copy CSS\r\n            <\/button>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n    \r\n    <div class=\"mg-usage\">\r\n      <h2>Implementation Guide<\/h2>\r\n      <div class=\"mg-usage-content\">\r\n        <div class=\"mg-usage-section\">\r\n          <h3><span class=\"dashicons dashicons-info\"><\/span> About Glassmorphism<\/h3>\r\n          <p>Glassmorphism is a design trend characterized by transparency, background blur, and vibrant colors that create a frosted glass effect. It works best on colorful or gradient backgrounds.<\/p>\r\n          <ul>\r\n            <li>Use for modern, high-tech interfaces<\/li>\r\n            <li>Great for cards, modals, and overlays<\/li>\r\n            <li>Combine with vibrant backgrounds<\/li>\r\n            <li>Ensure sufficient contrast for readability<\/li>\r\n          <\/ul>\r\n        <\/div>\r\n        \r\n        <div class=\"mg-usage-section\">\r\n          <h3><span class=\"dashicons dashicons-info\"><\/span> About Neumorphism<\/h3>\r\n          <p>Neumorphism (or Soft UI) creates a soft, extruded plastic look with subtle shadows that appear to push or pull elements from the background. It works best with muted colors.<\/p>\r\n          <ul>\r\n            <li>Use for minimalist, tactile interfaces<\/li>\r\n            <li>Great for buttons, cards, and form elements<\/li>\r\n            <li>Maintain consistent light source<\/li>\r\n            <li>Avoid overuse which can reduce accessibility<\/li>\r\n          <\/ul>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<style>\r\n.morphism-generator {\r\n  --mg-primary: #4a00e0;\r\n  --mg-primary-light: #8e2de2;\r\n  --mg-secondary: #f8f9fa;\r\n  --mg-border: #e0e0e0;\r\n  --mg-text: #212529;\r\n  --mg-text-light: #6c757d;\r\n  --mg-card-bg: #ffffff;\r\n  --mg-success: #28a745;\r\n  --mg-glass-bg: linear-gradient(to right, #6a11cb, #2575fc);\r\n\r\n  font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif;\r\n  color: var(--mg-text);\r\n  background-color: var(--mg-secondary);\r\n  padding: 20px;\r\n  max-width: 1200px;\r\n  margin: 0 auto;\r\n}\r\n\r\n.mg-container {\r\n  background-color: var(--mg-card-bg);\r\n  border-radius: 10px;\r\n  box-shadow: 0 2px 10px rgba(0,0,0,0.05);\r\n  padding: 30px;\r\n}\r\n\r\n.mg-header {\r\n  text-align: center;\r\n  margin-bottom: 30px;\r\n}\r\n.mg-header h1 {\r\n  color: var(--mg-primary);\r\n  margin: 0;\r\n  font-size: 28px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: 10px;\r\n}\r\n.mg-header .dashicons {\r\n  font-size: 32px;\r\n  width: auto;\r\n  height: auto;\r\n}\r\n.mg-subtitle {\r\n  color: var(--mg-text-light);\r\n  margin-top: 8px;\r\n  font-size: 16px;\r\n}\r\n\r\n.mg-tabs {\r\n  display: flex;\r\n  border-bottom: 1px solid var(--mg-border);\r\n  margin-bottom: 25px;\r\n}\r\n.mg-tab {\r\n  padding: 12px 24px;\r\n  background: none;\r\n  border: none;\r\n  border-bottom: 3px solid transparent;\r\n  font-size: 16px;\r\n  font-weight: 500;\r\n  cursor: pointer;\r\n  color: var(--mg-text-light);\r\n  transition: all 0.2s ease;\r\n  position: relative;\r\n}\r\n.mg-tab.active {\r\n  color: var(--mg-primary);\r\n  border-bottom-color: var(--mg-primary);\r\n}\r\n.mg-tab:hover:not(.active) {\r\n  color: var(--mg-text);\r\n}\r\n\r\n.mg-content {\r\n  margin-bottom: 30px;\r\n}\r\n.mg-panel {\r\n  display: none;\r\n}\r\n.mg-panel.active {\r\n  display: block;\r\n}\r\n\r\n.mg-controls {\r\n  display: grid;\r\n  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));\r\n  gap: 20px;\r\n  margin-bottom: 25px;\r\n}\r\n.mg-control-group {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 8px;\r\n}\r\n.mg-control-group label {\r\n  font-size: 14px;\r\n  font-weight: 500;\r\n  color: var(--mg-text);\r\n}\r\n.mg-control-group input[type=\"range\"] {\r\n  width: 100%;\r\n}\r\n.mg-control-group input[type=\"color\"] {\r\n  width: 100%;\r\n  height: 40px;\r\n  padding: 2px;\r\n  border: 1px solid var(--mg-border);\r\n  border-radius: 4px;\r\n}\r\n.mg-control-group select {\r\n  padding: 8px 12px;\r\n  border: 1px solid var(--mg-border);\r\n  border-radius: 4px;\r\n  font-size: 14px;\r\n}\r\n.mg-control-group span {\r\n  font-size: 13px;\r\n  color: var(--mg-text-light);\r\n  text-align: right;\r\n}\r\n\r\n.mg-preview {\r\n  display: flex;\r\n  gap: 30px;\r\n  margin-bottom: 30px;\r\n}\r\n.mg-glass-preview, .mg-neo-preview {\r\n  flex: 1;\r\n  min-height: 300px;\r\n  border-radius: 12px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  padding: 30px;\r\n}\r\n.mg-glass-preview {\r\n  background: var(--mg-glass-bg);\r\n}\r\n.mg-neo-preview {\r\n  background-color: var(--mg-secondary);\r\n}\r\n\r\n.mg-glass-card, .mg-neo-card {\r\n  width: 100%;\r\n  max-width: 400px;\r\n  padding: 30px;\r\n  border-radius: 12px;\r\n  text-align: center;\r\n}\r\n.mg-glass-card h3, .mg-neo-card h3 {\r\n  margin-top: 0;\r\n  margin-bottom: 15px;\r\n  font-size: 20px;\r\n}\r\n.mg-glass-card p, .mg-neo-card p {\r\n  margin-bottom: 0;\r\n  font-size: 15px;\r\n  line-height: 1.6;\r\n}\r\n\r\n.mg-code {\r\n  flex: 1;\r\n  position: relative;\r\n}\r\n.mg-code pre {\r\n  background-color: #f8f9fa;\r\n  border-radius: 8px;\r\n  padding: 15px;\r\n  margin: 0;\r\n  height: 100%;\r\n  overflow: auto;\r\n}\r\n.mg-code code {\r\n  font-family: \"Courier New\", Courier, monospace;\r\n  font-size: 14px;\r\n  color: #333;\r\n  display: block;\r\n  white-space: pre-wrap;\r\n}\r\n.mg-copy-btn {\r\n  position: absolute;\r\n  top: 10px;\r\n  right: 10px;\r\n  padding: 6px 12px;\r\n  background-color: var(--mg-primary);\r\n  color: white;\r\n  border: none;\r\n  border-radius: 4px;\r\n  font-size: 13px;\r\n  cursor: pointer;\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 5px;\r\n  transition: background-color 0.2s ease;\r\n}\r\n.mg-copy-btn:hover {\r\n  background-color: var(--mg-primary-light);\r\n}\r\n.mg-copy-btn .dashicons {\r\n  font-size: 14px;\r\n  width: auto;\r\n  height: auto;\r\n}\r\n\r\n.mg-usage h2 {\r\n  margin-top: 0;\r\n  margin-bottom: 20px;\r\n  font-size: 20px;\r\n  color: var(--mg-primary);\r\n}\r\n.mg-usage-content {\r\n  display: grid;\r\n  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));\r\n  gap: 30px;\r\n}\r\n.mg-usage-section {\r\n  background-color: var(--mg-secondary);\r\n  border-radius: 8px;\r\n  padding: 20px;\r\n}\r\n.mg-usage-section h3 {\r\n  margin-top: 0;\r\n  margin-bottom: 15px;\r\n  font-size: 17px;\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 8px;\r\n}\r\n.mg-usage-section .dashicons {\r\n  color: var(--mg-primary);\r\n}\r\n.mg-usage-section p {\r\n  margin-top: 0;\r\n  margin-bottom: 15px;\r\n  font-size: 15px;\r\n  line-height: 1.6;\r\n}\r\n.mg-usage-section ul {\r\n  margin: 0;\r\n  padding-left: 20px;\r\n}\r\n.mg-usage-section li {\r\n  margin-bottom: 8px;\r\n  font-size: 14px;\r\n  line-height: 1.5;\r\n}\r\n\r\n@media (max-width: 768px) {\r\n  .mg-preview {\r\n    flex-direction: column;\r\n  }\r\n  \r\n  .mg-usage-content {\r\n    grid-template-columns: 1fr;\r\n  }\r\n}\r\n<\/style>\r\n\r\n<script>\r\ndocument.addEventListener('DOMContentLoaded', function() {\r\n  \/\/ Tab switching\r\n  const tabs = document.querySelectorAll('.mg-tab');\r\n  tabs.forEach(tab => {\r\n    tab.addEventListener('click', function() {\r\n      \/\/ Remove active class from all tabs\r\n      tabs.forEach(t => t.classList.remove('active'));\r\n      \/\/ Add active class to clicked tab\r\n      this.classList.add('active');\r\n      \r\n      \/\/ Hide all panels\r\n      document.querySelectorAll('.mg-panel').forEach(panel => {\r\n        panel.classList.remove('active');\r\n      });\r\n      \r\n      \/\/ Show selected panel\r\n      const panelId = this.getAttribute('data-tab') + 'Panel';\r\n      document.getElementById(panelId).classList.add('active');\r\n      \r\n      \/\/ Update previews when switching tabs\r\n      updateGlassPreview();\r\n      updateNeoPreview();\r\n    });\r\n  });\r\n  \r\n  \/\/ Glassmorphism controls\r\n  const glassControls = {\r\n    blur: document.getElementById('glassBlur'),\r\n    opacity: document.getElementById('glassOpacity'),\r\n    border: document.getElementById('glassBorder'),\r\n    color: document.getElementById('glassColor'),\r\n    bgColor: document.getElementById('glassBgColor'),\r\n    gradient: document.getElementById('glassBgGradient')\r\n  };\r\n  \r\n  \/\/ Glassmorphism value displays\r\n  const glassValues = {\r\n    blur: document.getElementById('glassBlurValue'),\r\n    opacity: document.getElementById('glassOpacityValue'),\r\n    border: document.getElementById('glassBorderValue')\r\n  };\r\n  \r\n  \/\/ Neumorphism controls\r\n  const neoControls = {\r\n    size: document.getElementById('neoSize'),\r\n    blur: document.getElementById('neoBlur'),\r\n    distance: document.getElementById('neoDistance'),\r\n    color: document.getElementById('neoColor'),\r\n    light: document.getElementById('neoLight'),\r\n    shape: document.getElementById('neoShape')\r\n  };\r\n  \r\n  \/\/ Neumorphism value displays\r\n  const neoValues = {\r\n    size: document.getElementById('neoSizeValue'),\r\n    blur: document.getElementById('neoBlurValue'),\r\n    distance: document.getElementById('neoDistanceValue')\r\n  };\r\n  \r\n  \/\/ Copy buttons\r\n  const copyButtons = document.querySelectorAll('.mg-copy-btn');\r\n  \r\n  \/\/ Initialize controls\r\n  setupGlassControls();\r\n  setupNeoControls();\r\n  setupCopyButtons();\r\n  \r\n  function setupGlassControls() {\r\n    \/\/ Update value displays\r\n    glassControls.blur.addEventListener('input', function() {\r\n      glassValues.blur.textContent = this.value + 'px';\r\n      updateGlassPreview();\r\n    });\r\n    \r\n    glassControls.opacity.addEventListener('input', function() {\r\n      glassValues.opacity.textContent = this.value + '%';\r\n      updateGlassPreview();\r\n    });\r\n    \r\n    glassControls.border.addEventListener('input', function() {\r\n      glassValues.border.textContent = this.value + 'px';\r\n      updateGlassPreview();\r\n    });\r\n    \r\n    \/\/ Update preview when other controls change\r\n    glassControls.color.addEventListener('change', updateGlassPreview);\r\n    glassControls.bgColor.addEventListener('change', updateGlassPreview);\r\n    glassControls.gradient.addEventListener('change', updateGlassPreview);\r\n  }\r\n  \r\n  function setupNeoControls() {\r\n    \/\/ Update value displays\r\n    neoControls.size.addEventListener('input', function() {\r\n      neoValues.size.textContent = this.value + 'px';\r\n      updateNeoPreview();\r\n    });\r\n    \r\n    neoControls.blur.addEventListener('input', function() {\r\n      neoValues.blur.textContent = this.value + 'px';\r\n      updateNeoPreview();\r\n    });\r\n    \r\n    neoControls.distance.addEventListener('input', function() {\r\n      neoValues.distance.textContent = this.value + 'px';\r\n      updateNeoPreview();\r\n    });\r\n    \r\n    \/\/ Update preview when other controls change\r\n    neoControls.color.addEventListener('change', updateNeoPreview);\r\n    neoControls.light.addEventListener('change', updateNeoPreview);\r\n    neoControls.shape.addEventListener('change', updateNeoPreview);\r\n  }\r\n  \r\n  function setupCopyButtons() {\r\n    copyButtons.forEach(button => {\r\n      button.addEventListener('click', function() {\r\n        const targetId = this.getAttribute('data-target');\r\n        const codeElement = document.getElementById(targetId);\r\n        const range = document.createRange();\r\n        range.selectNode(codeElement);\r\n        window.getSelection().removeAllRanges();\r\n        window.getSelection().addRange(range);\r\n        document.execCommand('copy');\r\n        window.getSelection().removeAllRanges();\r\n        \r\n        \/\/ Show confirmation\r\n        const originalText = this.innerHTML;\r\n        this.innerHTML = `<span class=\"dashicons dashicons-yes\"><\/span> Copied!`;\r\n        \r\n        setTimeout(() => {\r\n          this.innerHTML = originalText;\r\n        }, 2000);\r\n      });\r\n    });\r\n  }\r\n  \r\n  function updateGlassPreview() {\r\n    const blur = glassControls.blur.value;\r\n    const opacity = glassControls.opacity.value \/ 100;\r\n    const border = glassControls.border.value;\r\n    const color = glassControls.color.value;\r\n    const bgColor = glassControls.bgColor.value;\r\n    const gradient = glassControls.gradient.value;\r\n    \r\n    \/\/ Update preview background\r\n    const glassPreview = document.getElementById('glassPreview');\r\n    glassPreview.style.background = `linear-gradient(${gradient}, ${bgColor}, ${adjustColor(bgColor, 20)})`;\r\n    \r\n    \/\/ Update card styles\r\n    const glassCard = document.querySelector('.mg-glass-card');\r\n    glassCard.style.backdropFilter = `blur(${blur}px)`;\r\n    glassCard.style.webkitBackdropFilter = `blur(${blur}px)`;\r\n    glassCard.style.backgroundColor = `rgba(${hexToRgb(color)}, ${opacity})`;\r\n    glassCard.style.border = `${border}px solid rgba(255, 255, 255, ${opacity * 0.5})`;\r\n    glassCard.style.boxShadow = `0 4px 30px rgba(0, 0, 0, ${opacity * 0.1})`;\r\n    \r\n    \/\/ Update code output\r\n    const glassCode = document.getElementById('glassCode');\r\n    glassCode.textContent = `\/* Glassmorphism CSS *\/\r\n.element {\r\n  backdrop-filter: blur(${blur}px);\r\n  -webkit-backdrop-filter: blur(${blur}px);\r\n  background-color: rgba(${hexToRgb(color)}, ${opacity});\r\n  border: ${border}px solid rgba(255, 255, 255, ${opacity * 0.5});\r\n  box-shadow: 0 4px 30px rgba(0, 0, 0, ${opacity * 0.1});\r\n  border-radius: 12px;\r\n}\r\n\r\n\/* Background example *\/\r\n.background {\r\n  background: linear-gradient(${gradient}, ${bgColor}, ${adjustColor(bgColor, 20)});\r\n}`;\r\n  }\r\n  \r\n  function updateNeoPreview() {\r\n    const size = neoControls.size.value;\r\n    const blur = neoControls.blur.value;\r\n    const distance = neoControls.distance.value;\r\n    const color = neoControls.color.value;\r\n    const light = neoControls.light.value;\r\n    const shape = neoControls.shape.value;\r\n    \r\n    \/\/ Calculate shadow positions based on light source\r\n    let shadow1, shadow2;\r\n    const darkColor = adjustColor(color, -15);\r\n    const lightColor = adjustColor(color, 15);\r\n    \r\n    switch(light) {\r\n      case 'top left':\r\n        shadow1 = `${distance}px ${distance}px ${blur}px ${darkColor}`;\r\n        shadow2 = `-${distance}px -${distance}px ${blur}px ${lightColor}`;\r\n        break;\r\n      case 'top':\r\n        shadow1 = `0px ${distance}px ${blur}px ${darkColor}`;\r\n        shadow2 = `0px -${distance}px ${blur}px ${lightColor}`;\r\n        break;\r\n      case 'top right':\r\n        shadow1 = `-${distance}px ${distance}px ${blur}px ${darkColor}`;\r\n        shadow2 = `${distance}px -${distance}px ${blur}px ${lightColor}`;\r\n        break;\r\n      case 'left':\r\n        shadow1 = `${distance}px 0px ${blur}px ${darkColor}`;\r\n        shadow2 = `-${distance}px 0px ${blur}px ${lightColor}`;\r\n        break;\r\n      case 'right':\r\n        shadow1 = `-${distance}px 0px ${blur}px ${darkColor}`;\r\n        shadow2 = `${distance}px 0px ${blur}px ${lightColor}`;\r\n        break;\r\n      case 'bottom left':\r\n        shadow1 = `${distance}px -${distance}px ${blur}px ${darkColor}`;\r\n        shadow2 = `-${distance}px ${distance}px ${blur}px ${lightColor}`;\r\n        break;\r\n      case 'bottom':\r\n        shadow1 = `0px -${distance}px ${blur}px ${darkColor}`;\r\n        shadow2 = `0px ${distance}px ${blur}px ${lightColor}`;\r\n        break;\r\n      case 'bottom right':\r\n        shadow1 = `-${distance}px -${distance}px ${blur}px ${darkColor}`;\r\n        shadow2 = `${distance}px ${distance}px ${blur}px ${lightColor}`;\r\n        break;\r\n    }\r\n    \r\n    \/\/ Update preview background\r\n    const neoPreview = document.getElementById('neoPreview');\r\n    neoPreview.style.backgroundColor = color;\r\n    \r\n    \/\/ Update card styles based on shape type\r\n    const neoCard = document.querySelector('.mg-neo-card');\r\n    neoCard.style.backgroundColor = color;\r\n    \r\n    switch(shape) {\r\n      case 'normal':\r\n        neoCard.style.boxShadow = `${shadow1}, ${shadow2}`;\r\n        neoCard.style.transform = 'none';\r\n        break;\r\n      case 'pressed':\r\n        neoCard.style.boxShadow = `inset ${shadow1}, inset ${shadow2}`;\r\n        neoCard.style.transform = 'none';\r\n        break;\r\n      case 'convex':\r\n        neoCard.style.boxShadow = `${shadow1}, ${shadow2}`;\r\n        neoCard.style.transform = 'perspective(500px) rotateX(10deg) rotateY(10deg)';\r\n        break;\r\n      case 'concave':\r\n        neoCard.style.boxShadow = `inset ${shadow1}, inset ${shadow2}`;\r\n        neoCard.style.transform = 'perspective(500px) rotateX(10deg) rotateY(10deg)';\r\n        break;\r\n    }\r\n    \r\n    neoCard.style.borderRadius = `${size}px`;\r\n    \r\n    \/\/ Update code output\r\n    const neoCode = document.getElementById('neoCode');\r\n    neoCode.textContent = `\/* Neumorphism CSS *\/\r\n.element {\r\n  background-color: ${color};\r\n  border-radius: ${size}px;\r\n  box-shadow: ${shadow1}, ${shadow2};\r\n}\r\n\r\n\/* Pressed effect *\/\r\n.element.pressed {\r\n  box-shadow: inset ${shadow1}, inset ${shadow2};\r\n}\r\n\r\n\/* Background color *\/\r\n.container {\r\n  background-color: ${color};\r\n}`;\r\n  }\r\n  \r\n  \/\/ Helper function to adjust color brightness\r\n  function adjustColor(color, amount) {\r\n    const rgb = hexToRgb(color);\r\n    const r = clamp(rgb.r + amount, 0, 255);\r\n    const g = clamp(rgb.g + amount, 0, 255);\r\n    const b = clamp(rgb.b + amount, 0, 255);\r\n    return `rgb(${r}, ${g}, ${b})`;\r\n  }\r\n  \r\n  \/\/ Helper function to convert hex to rgb\r\n  function hexToRgb(hex) {\r\n    const result = \/^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$\/i.exec(hex);\r\n    return result ? {\r\n      r: parseInt(result[1], 16),\r\n      g: parseInt(result[2], 16),\r\n      b: parseInt(result[3], 16)\r\n    } : { r: 0, g: 0, b: 0 };\r\n  }\r\n  \r\n  \/\/ Helper function to clamp values\r\n  function clamp(value, min, max) {\r\n    return Math.min(Math.max(value, min), max);\r\n  }\r\n  \r\n  \/\/ Initialize previews\r\n  updateGlassPreview();\r\n  updateNeoPreview();\r\n});\r\n<\/script>\r\n\n\n\n\n<p><a href=\"https:\/\/ingenio.vip\/wp-admin\/admin.php?page=ingenio-tools-glassmorphism-neumorphism-generator\"><\/a><\/p>","protected":false},"excerpt":{"rendered":"<p>Morphism Effects Generator Create stunning Glassmorphism and Neumorphism designs Glassmorphism Neumorphism Blur Amount 10px Opacity 80% Border 1px Base Color Background Color Gradient Direction Horizontal Vertical Diagonal 135\u00b0 Angle Glassmorphism Card This transparent effect creates depth with blur and transparency. \/* Generated CSS will appear here *\/ Copy CSS Effect Size 15px Blur Amount 15px [&hellip;]<\/p>\n<\/p><div class=\"more-link\"><a href=\"https:\/\/ingenio.vip\/zh\/tools-pages\/glassmorphism-neumorphism-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-4462","tools-pages","type-tools-pages","status-publish","hentry"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/ingenio.vip\/zh\/wp-json\/wp\/v2\/tools-pages\/4462","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\/4462\/revisions"}],"predecessor-version":[{"id":4463,"href":"https:\/\/ingenio.vip\/zh\/wp-json\/wp\/v2\/tools-pages\/4462\/revisions\/4463"}],"wp:attachment":[{"href":"https:\/\/ingenio.vip\/zh\/wp-json\/wp\/v2\/media?parent=4462"}],"wp:term":[{"taxonomy":"tools-categories","embeddable":true,"href":"https:\/\/ingenio.vip\/zh\/wp-json\/wp\/v2\/tools-categories?post=4462"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}