CSS Filter cho phép áp dụng hiệu ứng đồ họa (blur, màu sắc, đối比度...) trực tiếp trên element/img mà không cần chỉnh sửa file gốc.
Các hàm Filter phổ biến
| Hàm | Mô tả | Giá trị | Ví dụ |
|---|---|---|---|
| blur() | Làm mờ | length (px, em...) | blur(5px) |
| brightness() | Độ sáng | % hoặc số (1=100%) | brightness(1.5) / 150% |
| contrast() | Độ tương phản | % hoặc số | contrast(200%) |
| grayscale() | Xám (bỏ màu) | % (0-100%) | grayscale(100%) |
| invert() | Đảo ngược màu | % (0-100%) | invert(100%) |
| opacity() | Độ trong suốt | % (0-100%) | opacity(50%) |
| saturate() | Độ bão hòa màu | % hoặc số | saturate(200%) |
| sepia() | Màu nâu vintage | % (0-100%) | sepia(100%) |
| hue-rotate() | Xoay màu trên vòng tròn | deg | hue-rotate(90deg) |
| drop-shadow() | Đổ bóng (như box-shadow nhưng theo hình ảnh) | x y blur color | drop-shadow(2px 4px 6px #000) |
| url() | SVG filter tùy chỉnh | url(#filterId) | url("filter.svg#id") |
Ví dụ mã nguồn
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; text-align: center; padding: 20px; }
.filters { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; margin: 20px 0; }
.filter-box { text-align: center; }
.filter-box img { width: 200px; height: 200px; object-fit: cover; border-radius: 8px; transition: filter 0.3s; }
.filter-box img:hover { filter: none; } /* Hover xem gốc */
.normal { filter: none; }
.blur { filter: blur(4px); }
.brightness { filter: brightness(1.5); }
.contrast { filter: contrast(200%); }
.grayscale { filter: grayscale(100%); }
.invert { filter: invert(100%); }
.opacity { filter: opacity(50%); }
.saturate { filter: saturate(300%); }
.sepia { filter: sepia(100%); }
.hue { filter: hue-rotate(180deg); }
.multi { filter: grayscale(50%) contrast(150%) brightness(1.2); }
</style>
</head>
<body>
<h1>CSS3 Filter Effects Demo</h1>
<div class="filters">
<div class="filter-box"><img class="normal" src="https://i.picsum.photos/id/237/536/354.jpg"><p>Normal</p></div>
<div class="filter-box"><img class="blur" src="https://i.picsum.photos/id/237/536/354.jpg"><p>Blur(4px)</p></div>
<div class="filter-box"><img class="brightness" src="https://i.picsum.photos/id/237/536/354.jpg"><p>Brightness(150%)</p></div>
<div class="filter-box"><img class="contrast" src="https://i.picsum.photos/id/237/536/354.jpg"><p>Contrast(200%)</p></div>
<div class="filter-box"><img class="grayscale" src="https://i.picsum.photos/id/237/536/354.jpg"><p>Grayscale(100%)</p></div>
<div class="filter-box"><img class="invert" src="https://i.picsum.photos/id/237/536/354.jpg"><p>Invert(100%)</p></div>
<div class="filter-box"><img class="opacity" src="https://i.picsum.photos/id/237/536/354.jpg"><p>Opacity(50%)</p></div>
<div class="filter-box"><img class="saturate" src="https://i.picsum.photos/id/237/536/354.jpg"><p>Saturate(300%)</p></div>
<div class="filter-box"><img class="sepia" src="https://i.picsum.photos/id/237/536/354.jpg"><p>Sepia(100%)</p></div>
<div class="filter-box"><img class="hue" src="https://i.picsum.photos/id/237/536/354.jpg"><p>Hue-rotate(180deg)</p></div>
<div class="filter-box"><img class="multi" src="https://i.picsum.photos/id/237/536/354.jpg"><p>Multi filters</p></div>
</div>
<p>Di chuột qua ảnh để xem gốc</p>
</body>
</html>
Kết hợp nhiều filter
/* Thứ tự quan trọng: áp dụng theo thứ tự viết */
.complex-filter {
filter:
grayscale(50%)
contrast(150%)
brightness(1.1)
saturate(120%)
hue-rotate(10deg)
drop-shadow(0 10px 20px rgba(0,0,0,0.3));
}
Hiệu năng & Lưu ý
- Filter được GPU accelerate (tốt cho animation)
filtertrên container cha ảnh hưởng tất cả con (kể cả text) - cẩn thậnbackdrop-filterchỉ lọc nền đằng sau (kính mờ glassmorphism)- SVG filter (
url()) mạnh hơn cho hiệu ứng phức tạp (displacement, turbulence...)