Trình Tạo CSS Filter là gì?

Trình Tạo CSS Filter là một công cụ trực quan giúp bạn tạo và kết hợp các hiệu ứng CSS filter với xem trước hình ảnh trực tiếp. Thay vì viết thủ công các thuộc tính CSS filter và đoán giá trị, bạn có thể điều chỉnh trực quan từng bộ lọc và xem kết quả ngay lập tức trên hình ảnh thực tế.

Thuộc Tính CSS Filter

Thuộc tính CSS filter áp dụng các hiệu ứng đồ họa như blur, điều chỉnh độ sáng, độ tương phản và các phép biến đổi màu sắc cho các phần tử. Nó thường được sử dụng cho các hiệu ứng hình ảnh, trạng thái hover và thiết kế giao diện sáng tạo.

Hỗ trợ trình duyệt: CSS filter được hỗ trợ trong tất cả các trình duyệt hiện đại với hơn 97% phạm vi toàn cầu bao gồm Chrome, Firefox, Safari và Edge.

Các Hàm Filter Được Hỗ Trợ

Công cụ này hỗ trợ tất cả 9 hàm CSS filter tiêu chuẩn:

blur()

Áp dụng hiệu ứng mờ Gaussian cho phần tử

brightness()

Làm cho phần tử sáng hơn hoặc tối hơn

contrast()

Điều chỉnh mức độ tương phản

grayscale()

Chuyển đổi thành thang độ xám (đen trắng)

hue-rotate()

Xoay sắc độ màu theo một góc được chỉ định

invert()

Đảo ngược các màu sắc

opacity()

Kiểm soát mức độ trong suốt

saturate()

Điều chỉnh độ bão hòa màu sắc

sepia()

Áp dụng tông màu ấm áp, nâu cổ điển

Table of Contents

1. Trình Tạo CSS Filter là gì?
- 1.1. Thuộc Tính CSS Filter
- 1.2. Các Hàm Filter Được Hỗ Trợ
2. Cách Sử Dụng
3. Các Tính Năng
4. Các Câu Hỏi Thường Gặp

Cách Sử Dụng

Điều Chỉnh Các Bộ Lọc

Sử dụng thanh trượt trên bảng điều khiển bên phải để điều chỉnh từng thuộc tính CSS filter. Bạn cũng có thể nhập các giá trị chính xác trực tiếp vào các ô nhập số. Xem trước hình ảnh cập nhật thời gian thực khi bạn thực hiện các thay đổi.

Sử Dụng Preset (Tùy Chọn)

Nhấp vào bất kỳ hình ảnh thu nhỏ preset nào để áp dụng ngay lập tức một kết hợp bộ lọc được xác định trước. Các preset có sẵn bao gồm Vintage, Noir, Warm, Cool, Dramatic và nhiều hơn nữa. Sau khi áp dụng preset, bạn có thể tiếp tục tinh chỉnh các bộ lọc riêng lẻ.

Bật/Tắt Các Bộ Lọc

Mỗi bộ lọc có một hộp kiểm cho phép bạn bật hoặc tắt nó mà không mất giá trị hiện tại. Điều này rất hữu ích để so sánh hiệu ứng của các bộ lọc riêng lẻ trên kết quả tổng thể.

So Sánh Trước/Sau

Giữ nút biểu tượng mắt để tạm thời loại bỏ tất cả các bộ lọc và xem hình ảnh gốc. Thả để quay lại phiên bản được lọc.

Sao Chép Mã CSS

Mã CSS được tạo ra được hiển thị bên dưới xem trước. Nhấp vào nút Sao Chép để sao chép thuộc tính filter hoàn chỉnh vào bảng tạm của bạn, sẵn sàng dán vào bảng kiểu của bạn.

Mẹo Pro: Nhấp vào nút tải lên để sử dụng hình ảnh của riêng bạn để xem trước các hiệu ứng bộ lọc. Điều này giúp bạn xem chính xác cách các bộ lọc sẽ trông như thế nào trên nội dung thực tế của bạn.

Các Tính Năng

9 Điều Khiển CSS Filter

Kiểm soát đầy đủ tất cả các hàm CSS filter tiêu chuẩn với thanh trượt trực quan và ô nhập số chính xác.

Blur tính bằng pixel
Hue-rotate tính bằng độ
Các hàm khác tính bằng phần trăm

Xem Trước Hình Ảnh Trực Tiếp

Xem các thay đổi bộ lọc của bạn được áp dụng ngay lập tức trên hình ảnh thực tế.

Cập nhật thời gian thực
Không cần viết mã
Phản hồi trực quan tức thì

10 Preset Tích Hợp

Bắt đầu nhanh chóng với các kết hợp bộ lọc được thiết kế chuyên nghiệp.

Vintage, Noir, Warm, Cool
Dramatic, Faded, Hi-Con
Dreamy, Invert, Original

Bật/Tắt Bộ Lọc Riêng Lẻ

Bật hoặc tắt bất kỳ bộ lọc nào một cách độc lập bằng cách sử dụng hộp kiểm.

Cô lập các hiệu ứng bộ lọc
So sánh các đóng góp
Bảo tồn giá trị thanh trượt

So Sánh Trước/Sau

Giữ nút so sánh để xem ngay lập tức hình ảnh gốc không được lọc.

Hỗ trợ chuột và cảm ứng
Chuyển đổi tức thì
So sánh dễ dàng

Tải Lên Hình Ảnh Tùy Chỉnh

Tải lên hình ảnh của riêng bạn để xem trước các bộ lọc trên nội dung thực tế.

Hỗ trợ JPG, PNG
Xử lý cục bộ
Kiểm tra trên nội dung thực tế

Xuất CSS Chỉ Bằng Một Cú Nhấp Chuột

Mã CSS được tạo ra cập nhật trực tiếp khi bạn điều chỉnh các bộ lọc.

Sao chép chỉ bằng một cú nhấp chuột
Sẵn sàng dán
Thuộc tính bộ lọc hoàn chỉnh

Dữ Liệu Của Bạn Vẫn Riêng Tư

Tất cả xử lý diễn ra trong trình duyệt của bạn.

Không tải lên máy chủ
Không theo dõi
Quyền riêng tư hoàn toàn

Các Câu Hỏi Thường Gặp

Những CSS filter nào được hỗ trợ?

Công cụ này hỗ trợ tất cả 9 hàm CSS filter tiêu chuẩn: blur(), brightness(), contrast(), grayscale(), hue-rotate(), invert(), opacity(), saturate() và sepia().

Tôi có thể kết hợp nhiều bộ lọc không?

Có. Bạn có thể điều chỉnh nhiều bộ lọc cùng một lúc. Thuộc tính CSS filter hỗ trợ xâu chuỗi nhiều hàm, và công cụ này tự động tạo ra kết quả kết hợp.

Các preset làm gì?

Preset là các kết hợp bộ lọc được xác định trước tạo ra các hiệu ứng hình ảnh phổ biến. Ví dụ, "Vintage" áp dụng sepia và điều chỉnh độ sáng/tương phản để có giao diện ảnh cổ điển. Bạn có thể sử dụng preset làm điểm bắt đầu và sau đó tùy chỉnh các bộ lọc riêng lẻ.

Hình ảnh tải lên của tôi có được gửi đến máy chủ không?

Không. Tất cả xử lý hình ảnh diễn ra hoàn toàn trong trình duyệt của bạn bằng JavaScript. Hình ảnh của bạn không bao giờ được tải lên bất kỳ máy chủ nào.

Những trình duyệt nào hỗ trợ CSS filter?

CSS filter được hỗ trợ trong tất cả các trình duyệt hiện đại bao gồm Chrome, Firefox, Safari và Edge. Chúng có hỗ trợ rộng rãi với hơn 97% phạm vi trình duyệt toàn cầu.

Làm cách nào để đặt lại tất cả các bộ lọc?

Nhấp vào nút Đặt Lại trong bảng preset để trả về tất cả các bộ lọc về giá trị mặc định (không áp dụng hiệu ứng).

Tôi có thể bật/tắt các bộ lọc riêng lẻ không?

Có. Mỗi bộ lọc có một hộp kiểm bên cạnh tên của nó. Bỏ chọn nó sẽ vô hiệu hóa bộ lọc cụ thể đó trong khi giữ giá trị của nó, vì vậy bạn có thể dễ dàng bật lại nó sau này mà không cần điều chỉnh lại thanh trượt.