CSS Blur - Tạo Hiệu Ứng Làm Mờ Hình Ảnh

Khi thiết kế web, bạn có thể muốn làm mờ một hình ảnh - ví dụ: làm mờ ảnh nền để đặt chữ lên trên dễ đọc hơn. Hàm blur() trong CSS chính là công cụ cho việc này.

CSS Filter Property

Thuộc tính filter cho phép áp dụng các hiệu ứng đồ họa lên phần tử (thường là ảnh, background). Các filter phổ biến: opacity (độ trong suốt), drop-shadow (bóng đổ), blur (làm mờ)...

Cú pháp chung:

filter: filterName(arguments);

Hàm CSS blur()

Hàm blur() thêm hiệu ứng làm mờ cho ảnh. Cú pháp:

filter: blur(radius);

radius: Bán kính làm mờ. Giá trị càng lớn → mờ càng mạnh. 0 = không mờ.
Chấp nhận mọi đơn vị độ dài CSS: px, em, rem, cm...

Ví Dụ: Làm Mờ Ảnh Cà Phê

Trang web quán cà phê muốn ảnh stock cà phê hiện với độ mờ 2px.

<html>
  <img src="https://images.unsplash.com/photo-1489533119213-66a5cd877091..." 
       height="400" width="600" />
</html>

<style>
  img { filter: blur(2px); }
</style>

CSS Blur - Tạo Hiệu Ứng Làm Mờ Hình Ảnh

Ảnh cà phê hiện ra hơi mờ. Bạn có thể thay 2px bằng 1.15em hoặc đơn vị khác tùy ý.

Kết Luận

Hàm blur() kết hợp với filter tạo hiệu ứng làm mờ ảnh. Bạn đã nắm cách dùng - hãy áp dụng vào thiết kế web chuyên nghiệp!