Tidadigi Logo

CSS blur() Function

Hàm CSS blur() áp dụng hiệu ứng làm mờ Gaussian cho một phần tử. Nó làm cho phần tử có vẻ ngoài mất nét. Hàm này được dùng với thuộc tính filter và nhận giá trị độ dài bán kính mờ.

Hàm CSS blur() là một phần của thuộc tính filter trong CSS. Thuộc tính này cho phép bạn áp dụng các hiệu ứng đồ họa cho các phần tử. Các hiệu ứng bao gồm làm mờ, làm sắc nét hoặc thay đổi màu sắc.

Cú pháp

filter: blur(radius);

Tham số

"radius" chỉ định bán kính mờ. Giá trị càng cao, phần tử càng bị mờ nhiều. Nó có thể được chỉ định bằng nhiều đơn vị khác nhau như pixels ('px'). Các đơn vị khác như rems ('rem') hoặc phần trăm ('%') cũng được chấp nhận.

Ví dụ về hàm CSS blur()

Các ví dụ dưới đây minh họa hàm blur() trong CSS:

Ví dụ 1: Trong ví dụ này, hàm CSS blur() thêm độ mờ 5px vào logo GeeksforGeeks. Văn bản trong 'h1' và 'body' được căn giữa và tạo kiểu màu xanh lá cây.

html 
<!DOCTYPE html>
<html>

<head>
    <title>CSS blur() Function</title>

    <style>
        h1 {
            color: green;
        }

        body {
            text-align: center;
        }

        .blur_effect {
            filter: blur(5px);
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>

    <h2>CSS blur() function</h2>

    <img class="blur_effect" 
         src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
        alt="GeeksforGeeks logo">
</body>

</html>

Đầu ra: css-blur-function

Ví dụ 2: Ví dụ này minh họa hàm CSS blur() sử dụng Flexbox cho bố cục. Nó hiển thị hình ảnh với các mức độ mờ khác nhau như blur(0). Bên cạnh đó, còn có blur(3px) và blur(1.5rem). Mỗi hình ảnh được hiển thị với kích thước và margin cụ thể. Điều này minh họa rõ cách các giá trị mờ khác nhau ảnh hưởng đến độ rõ nét.

HTML 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Blur Function Example</title>
    <style>
        .myDiv {
            display: flex;
        }

        .blur-none {
            filter: blur(0);
        }

        .blur-medium {
            filter: blur(3px);
        }

        .blur-large {
            filter: blur(1.5rem);
        }

        img {
            display: block;
            margin-bottom: 20px;
            margin: 5px;
            width: 80px;
            height: 80px;
        }
    </style>
</head>

<body>
    <h1>CSS blur() Function Example</h1>
    <div class="myDiv">
        <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
            alt="Image with no blur" 
            class="blur-none">
        <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
            alt="Image with 3px blur" 
            class="blur-medium">
        <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
            alt="Image with 1.5rem blur" 
            class="blur-large">
    </div>

</body>

</html>

Đầu ra:

css-blur-function
Output

Trình duyệt được hỗ trợ

Hàm CSS blur() được hỗ trợ rộng rãi trên hầu hết các trình duyệt hiện đại. Dưới đây là tóm tắt nhanh về khả năng tương thích của nó:

  • Google Chrome: Được hỗ trợ từ phiên bản 18 trở lên.
  • Firefox: Được hỗ trợ từ phiên bản 35 trở lên.
  • Safari: Được hỗ trợ từ phiên bản 6 trở lên.
  • Edge: Được hỗ trợ từ phiên bản 12 trở lên.
  • Opera: Được hỗ trợ từ phiên bản 15 trở lên.
  • Internet Explorer: Không được hỗ trợ.

Hàm blur() là một phần của thuộc tính CSS filter. Nó thường được hỗ trợ tốt trong tất cả các trình duyệt hiện đại trên cả nền tảng desktop và mobile. Tuy nhiên, hãy luôn kiểm tra trạng thái hỗ trợ mới nhất. Đặc biệt nếu bạn nhắm mục tiêu đến các phiên bản trình duyệt cũ hơn.


Last Updated : 21/07/2025