Hàm blur() CSS

Định nghĩa và cách sử dụng

Hàm blur() của CSS blur() Hàm lọc áp dụng hiệu ứng mờ cho phần tử. Giá trị lớn hơn sẽ tạo ra hiệu ứng mờ mạnh hơn.

Nếu không chỉ định giá trị, mặc định sẽ sử dụng 0.

Mô hình

Ví dụ 1

Áp dụng hiệu ứng mờ khác nhau cho thẻ <h1> và <img>:

h1 {
  filter: blur(2px);
}
#img1 {
  filter: blur(2px);
}
#img2 {
  filter: blur(6px);
}

Thử ngay

Ví dụ 2

Tạo background mờ:

img.background {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
  filter: blur(35px);
}

Thử ngay

Ngữ pháp CSS

blur(radius)
Giá trị Mô tả
radius

Tùy chọn. Định nghĩa bán kính mờ. Giá trị lớn hơn sẽ tạo ra hiệu ứng mờ mạnh hơn.

Nếu không chỉ định giá trị, mặc định sẽ sử dụng 0 (không có hiệu ứng).

Chi tiết kỹ thuật

Phiên bản: Module hiệu ứng lọc CSS Filter Effects Level 1

Hỗ trợ trình duyệt

Số trong bảng biểu thị phiên bản trình duyệt đầu tiên hỗ trợ hàm này hoàn toàn.

Chrome Edge Firefox Safari Opera
18 12 35 6 15

Trang liên quan

Tham khảo:Thuộc tính filter trong CSS

Tham khảo:Hàm brightness() CSS

Tham khảo:Hàm contrast() CSS

Tham khảo:Hàm drop-shadow() CSS

Tham khảo:Hàm grayscale() CSS

Tham khảo:Hàm hue-rotate() CSS

Tham khảo:Hàm invert() CSS

Tham khảo:Hàm opacity() CSS

Tham khảo:Hàm saturate() CSS

Tham khảo:Hàm sepia() CSS