Chuyển đổi hình ảnh sang Grayscale (xám) bằng CSS3

Để chuyển đổi hình ảnh sang thang độ xám (Grayscale) trong CSS3, sử dụng giá trị grayscale cho thuộc tính filter.

Ví dụ

<!DOCTYPE html>
<html>
<head>
<style>
img.demo {
  filter: brightness(120%);
  filter: contrast(120%);
  filter: grayscale(130%);
}
</style>
</head>
<body>
<h1>Spring Framework</h1>
<img src="https://www.tutorialspoint.com/spring/images/spring-mini-logo.jpg" alt="Spring" width="160" height="150">
<h1>Học MySQL</h1>
<p>Hình ảnh dưới đây sáng hơn và có độ tương phản cao hơn hình ảnh gốc ở trên. Ngoài ra hình ảnh ở thang độ xám:</p>
<img class="demo" src="https://www.tutorialspoint.com/spring/images/spring-mini-logo.jpg" alt="Spring" width="160" height="150">
</body>
</html>

Kết quả

Lưu ý:

• grayscale(0%): Gốc, grayscale(100%): Hoàn toàn xám
• Giá trị > 100% được clamp về 100%
• Ví dụ dùng 130% nhưng hiệu ứng giống 100%
• Nên gộp: filter: brightness(120%) contrast(120%) grayscale(100%);