Tidadigi Logo

CSS Filter Property

Thuộc tính filter trong CSS được dùng để áp dụng hiệu ứng hình ảnh cho các phần tử. Thường dùng nhất là cho hình ảnh. Nó đặc biệt hữu ích để điều chỉnh các hiệu ứng như background, border, và các thành phần khác.

Cú pháp

filter: none | blur() | brightness() | contrast() | drop-shadow() | 
grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

Lưu ý: Bạn có thể áp dụng nhiều filter cho một phần tử HTML. Các filter được phân tách bằng dấu cách.

Ví dụ: Ví dụ này áp dụng hai hàm filter cho phần tử ảnh trên trang web.

img{
   filter: brightness(20%) blur(20px);
}

Thuộc tính filter chấp nhận cả giá trị phần trăm và giá trị thập phân.

Các Hàm Filter Phổ Biến

Hàm FilterMô tả
noneĐây là giá trị mặc định, không áp dụng hiệu ứng nào cả.
blur()Áp dụng hiệu ứng làm mờ cho phần tử. Tham số value chỉ định mức độ mờ.

initial

Đặt filter về giá trị mặc định ban đầu.

brightness(value)Điều chỉnh độ sáng của phần tử. Tham số value chỉ định mức độ sáng.
contrast()Điều chỉnh độ tương phản của phần tử. Tham số value chỉ định mức độ tương phản.
drop-shadow()Áp dụng hiệu ứng đổ bóng cho phần tử. Các tham số xác định độ lệch, bán kính mờ, và màu sắc của bóng.
grayscale()Chuyển đổi phần tử thành thang độ xám. Tham số value chỉ định tỉ lệ độ xám được áp dụng.
hue-rotate()Xoay màu sắc của phần tử. Tham số value chỉ định góc xoay.
invert()Đảo ngược màu sắc của phần tử. Tham số value chỉ định tỉ lệ đảo ngược.
opacity()Điều chỉnh độ mờ của phần tử. Tham số value chỉ định mức độ mờ.
saturate()Điều chỉnh độ bão hòa của phần tử. Tham số value chỉ định mức độ bão hòa.
sepia()Áp dụng tông màu sepia cho phần tử. Tham số value chỉ định tỉ lệ sepia được áp dụng.
url()Cho phép bạn tham chiếu một filter SVG được xác định trong một tệp bên ngoài. Sử dụng một URL.

Ví dụ về CSS Filter

Dưới đây là các ví dụ về thuộc tính CSS Filter:

Ví dụ 1: Sử dụng CSS brightness Filter

Nó đặt độ sáng của phần tử. Nếu độ sáng là 0%, nó sẽ hoàn toàn màu đen. Nếu độ sáng là 100%, nó sẽ giống như bản gốc. Giá trị lớn hơn 100% sẽ làm cho phần tử sáng hơn.

Ví dụ: Ví dụ này mô tả thuộc tính filter với giá trị filter là brightness có 10%.

HTML 
<!DOCTYPE html>
<html>

<head>
    <title>CSS filter property</title>
    <style>
    img {
        filter: brightness(10%);
    }
    </style>
</head>

<body>
    <div> 
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png" 
             alt="Geeks image"> 
    </div>
</body>

</html>

Đầu ra:

css-filter-property

Ví dụ 2: Sử dụng CSS blur Filter

Nó áp dụng hiệu ứng mờ cho phần tử. Nếu giá trị mờ không được chỉ định, nó sẽ lấy 0 làm giá trị mặc định.

Ví dụ: Ví dụ này mô tả thuộc tính filter với giá trị filter là blur để tạo hiệu ứng ảnh mờ.

HTML 
<!DOCTYPE html>
<html>

<head>
    <title>CSS filter property</title>
    <style>
    img {
        filter: blur(5px);
    }
    </style>
</head>

<body>
    <div> 
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png" 
             alt="Geeks image">
    </div>
</body>

</html>

Đầu ra:

css-filter-property

Ví dụ 3: Sử dụng CSS Opacity Filter

Nó đặt hiệu ứng opacity của hình ảnh. Độ mờ 0% cho biết phần tử hoàn toàn trong suốt. Nếu độ mờ là 100%, nó cho biết hình ảnh gốc. Nó không chấp nhận giá trị âm.

Ví dụ: Ví dụ này mô tả thuộc tính filter trong đó giá trị filter được đặt là opacity với 0.5.

HTML 
<!DOCTYPE html>
<html>

<head>
    <title>CSS filter property</title>
    <style>
    img {
        filter: opacity(0.5);
    }
    </style>
</head>

<body>
    <div> 
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png" 
             alt="Geeks image"> 
    </div>
</body>

</html>

Đầu ra:

css-filter-property

Ví dụ 4: Sử dụng CSS hue-rotate Filter

Nó áp dụng xoay màu cho hình ảnh. Giá trị xác định số độ mà các mẫu hình ảnh sẽ được điều chỉnh. Giá trị mặc định là 0 độ và nó đại diện cho hình ảnh gốc.

Ví dụ: Ví dụ này mô tả thuộc tính filter trong đó hue-rotate được đặt thành 45deg.

HTML 
<!DOCTYPE html>
<html>

<head>
    <title>CSS filter property</title>
    <style>
    img {
        filter: hue-rotate(45deg);
    }
    </style>
</head>

<body>
    <div> 
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png"
             alt="Geeks image"> 
    </div>
</body>

</html>

Đầu ra:

css-filter-property

Ví dụ 5: Sử dụng CSS drop-shadow Filter

Nó áp dụng hiệu ứng đổ bóng cho phần tử. Nó chấp nhận h-shadow, v-shadow, blur, spread, và color làm giá trị. Nó không chỉ được áp dụng cho hình ảnh mà còn cho hình dạng. Nó có thể có cùng hình dạng với hình dạng gốc. Các giá trị âm cho h-shadow & v-shadow sẽ dịch chuyển bóng sang bên trái của hình ảnh.

Ví dụ: Ví dụ này mô tả thuộc tính filter trong đó hiệu ứng drop-shadow được áp dụng cho phần tử.

HTML 
<!DOCTYPE html>
<html>

<head>
    <title>CSS filter property</title>
    <style>
    img {
        filter: drop-shadow(16px 18px 15px rgba(255, 0, 0, 0.5));
    }
    </style>
</head>

<body>
    <div> 
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png" 
             alt="Geeks image"> 
    </div>
</body>

</html>

Đầu ra:

css-filter-property

Các Trình Duyệt Được Hỗ Trợ

Các trình duyệt được hỗ trợ bởi filter property được liệt kê dưới đây:


Last Updated : 21/07/2025