วิธีเพิ่ม Drop Shadow ให้ Box ด้วย JavaScript

ใช้ Property boxShadow เพื่อเพิ่ม Drop Shadow ให้ Element รองรับหลาย Shadow (Comma-separated)

ตัวอย่างโค้ด

<!DOCTYPE html>
<html>
  <head>
    <style>
      #box {
        border: thick solid green;
        width: 300px;
        height: 200px;
      }
    </style>
  </head>
  <body>
    <div id="box">Demo Text</div>
    <br><br>
    <button type="button" onclick="display()">Add drop shadow</button>
    <script>
      function display() {
        document.getElementById("box").style.boxShadow = "20px 15px 25px orange";
      }
    </script>
  </body>
</html>

Syntax: box-shadow Values

box-shadow: h-offset v-offset blur-radius spread-radius color inset;

Value	ความหมาย	จำเป็น
`h-offset`	Horizontal Offset (+ ขวา, - ซ้าย)	✅
`v-offset`	Vertical Offset (+ ลง, - ขึ้น)	✅
`blur-radius`	Blur Radius (มาก = Med Blur)	❌ (Default 0)
`spread-radius`	Spread Radius (ขยาย/หด Shadow)	❌ (Default 0)
`color`	สี Shadow (Default: currentColor)	❌
`inset`	Inner Shadow แทน Outer	❌

ตัวอย่างหลาย Shadow

// Multiple Shadows (Layered)
element.style.boxShadow = `
  0 2px 4px rgba(0,0,0,0.1),      /* Subtle */
  0 8px 16px rgba(0,0,0,0.1),     /* Medium */
  0 16px 32px rgba(0,0,0,0.1)     /* Large */
`;

// Inner Shadow
element.style.boxShadow = "inset 0 2px 4px rgba(0,0,0,0.1)";

Performance Tip

Shadow ใหญ่/หลาย Layer ใช้ GPU Memory มาก
ใช้ will-change: box-shadow หาก Animate
หลีกเลี่ยง Shadow บน Element ที่ Scroll/Animate บ่อย