Cách tạo hiệu ứng mờ dần (fading) với CSS

Để tạo hiệu ứng mờ dần với CSS, sử dụng gradient tuyến tính với rgba. Bạn có thể chạy mã sau cho hiệu ứng fading:

Ví dụ

<!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">Hiệu ứng mờ dần</div><br>
  </body>
</html>