สร้างเอฟเฟกต์การจาง (Fading Effect) ด้วย CSS

เพื่อสร้างเอฟเฟกต์การจาง (Fading Effect) ด้วย CSS ให้ใช้ linear-gradient() ร่วมกับ rgba() ที่มีค่า alpha (ความโปร่งใส) ต่างกัน

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

<!DOCTYPE html>
<html>
<head>
  <style>
    #demo {
      height: 100px;
      background: linear-gradient(to right, rgba(255,50,30,0), rgba(255,50,30,1));
    }
  </style>
</head>
<body>
  <h2>Linear Gradient</h2>
  <div id="demo">Fading Effect</div><br>
</body>
</html>

คำอธิบาย: rgba(255,50,30,0) = สีแดงโปร่งใส 100% (มองไม่เห็น) rgba(255,50,30,1) = สีแดงทึบ 100% to right ทำให้จางจากซ้ายไปขวา สามารถเปลี่ยนทิศทางได้ เช่น to bottom, to top right เป็นต้น