Tắt màu sắc toàn trang với CSS – Biến website thành trắng đen chỉ trong 1 dòng

Trong một số trường hợp đặc biệt như ngày quốc tang, chế độ tưởng niệm, hay đơn giản chỉ là để tạo hiệu ứng nghệ thuật, bạn có thể muốn chuyển toàn bộ website về dạng trắng đen (grayscale). Bài viết này hướng dẫn cách thực hiện cực kỳ nhanh và hiệu quả chỉ với một dòng CSS.

1. Cách thực hiện

Chỉ cần thêm đoạn CSS sau vào website của bạn (có thể chèn vào file style.css của theme, hoặc qua Customizer):

html {
    filter: grayscale(100%);
}

Dòng CSS trên sẽ áp dụng hiệu ứng lọc màu xám cho toàn bộ website – bao gồm cả văn bản, hình ảnh, icon… Mọi thứ sẽ được hiển thị dưới dạng trắng đen.

2. Ứng dụng thực tế

• Ngày quốc tang, thể hiện sự trang nghiêm và tôn trọng
• Hiệu ứng tưởng niệm hoặc đánh dấu sự kiện đặc biệt
• Hiệu ứng thị giác khi chuyển giao nội dung hoặc làm nổi bật điểm nhấn màu khác

3. Lưu ý khi sử dụng

• Không nên dùng lâu dài vì dễ gây cảm giác nhàm chán, thiếu sinh động.
• Một số trình duyệt cũ có thể không hỗ trợ tốt bộ lọc CSS.
• Nếu bạn đang làm website cho khách hàng, hãy thông báo trước với họ khi áp dụng chế độ này.

4. Tắt chế độ trắng đen

Khi không cần nữa, bạn chỉ việc xóa dòng CSS trên hoặc đổi lại thành:

html {
    filter: none;
}

Kết luận

Việc chuyển website về trắng đen chỉ bằng một dòng CSS là thủ thuật đơn giản nhưng hữu ích, giúp bạn phản ứng nhanh với các tình huống đặc biệt mà không cần can thiệp sâu vào hệ thống. Hãy lưu lại thủ thuật này để dùng khi cần!