CSS Filter Generator

CSS Filter Generator giúp bạn tạo và kết hợp các hiệu ứng filter của CSS một cách trực quan, kèm ảnh xem trước trực tiếp nên bạn không bao giờ phải đoán giá trị. Điều chỉnh blur, brightness, contrast, màu sắc và nhiều hơn, rồi sao chép chính xác thuộc tính filter dán thẳng vào stylesheet.

Công cụ dành cho lập trình viên front-end và nhà thiết kế muốn căn chỉnh hiệu ứng ảnh và hover mà không phải lặp đi lặp lại vòng sửa-lưu-tải lại. Mỗi hàm filter chuẩn đều có thanh trượt và ô số riêng, cùng mười mẫu dựng sẵn cho bạn một phong cách hoàn chỉnh để khởi đầu.

Riêng tư theo thiết kế: ảnh xem trước và bất kỳ ảnh nào bạn tải lên đều được xử lý hoàn toàn trong trình duyệt. Không có gì được gửi lên máy chủ, nên ảnh của bạn luôn nằm trên thiết bị của bạn.

Cách Dùng CSS Filter Generator

Điều chỉnh các filter

Kéo thanh trượt bất kỳ để thay đổi một filter, hoặc nhập con số chính xác vào ô số của nó. Ảnh xem trước và mã CSS tạo ra đều cập nhật theo thời gian thực ngay khi bạn thao tác.

Bắt đầu từ một mẫu có sẵn (tùy chọn)

Nhấp một ảnh thu nhỏ của mẫu — chẳng hạn Hoài cổ, Đen trắng hay Tương phản mạnh — để áp một phong cách dựng sẵn, rồi tinh chỉnh từng filter từ đó.

Bật/tắt và so sánh

Dùng hộp đánh dấu của mỗi filter để bật hoặc tắt nó mà không mất giá trị, và giữ nút hình mắt để xem nhanh ảnh gốc chưa áp filter.

Sao chép mã CSS

Thuộc tính filter hoàn chỉnh hiện ngay dưới ảnh xem trước. Nhấp Sao chép để đưa vào clipboard, sẵn sàng dán vào stylesheet của bạn.

Tính Năng

Chín Bộ Điều Khiển Filter

Toàn quyền kiểm soát blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate và sepia, mỗi cái có thanh trượt và ô số riêng.

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

Thấy mọi thay đổi áp ngay lên ảnh thật, không cần viết mã, lưu rồi tải lại trang.

Mười Mẫu Dựng Sẵn

Khởi đầu từ Ảnh gốc, Hoài cổ, Đen trắng, Ấm, Lạnh, Tương phản mạnh, Phai màu, Nét đậm, Mơ màng hay Đảo màu — mỗi mẫu hiển thị dạng ảnh thu nhỏ xem trước.

Bật/Tắt Từng Filter

Bật hoặc tắt bất kỳ filter nào bằng hộp đánh dấu để cô lập và so sánh hiệu ứng của nó, mà không mất giá trị đã đặt.

So Sánh Trước / Sau

Giữ nút hình mắt để xem ảnh gốc, rồi thả ra để quay lại phiên bản đã áp filter. Hoạt động với cả chuột lẫn cảm ứng.

Tải Ảnh Riêng Lên

Nạp ảnh của bạn để xem filter trên nội dung thật. Ảnh được đọc cục bộ ngay trong trình duyệt và không bao giờ được tải lên.

Đặt Lại Một Cú Nhấp

Nút Đặt lại đưa mọi filter về mặc định để bạn có thể bắt đầu một hiệu ứng mới bất cứ lúc nào.

Xuất CSS Một Cú Nhấp

Thuộc tính filter tạo ra cập nhật trực tiếp và sao chép vào clipboard chỉ với một cú nhấp.

Giao Diện Tối & Co Giãn

Giao diện tối tích hợp sẵn và bố cục co giãn giúp công cụ dùng thoải mái trên cả máy tính lẫn điện thoại.

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

Công cụ này hỗ trợ những CSS filter nào?

Nó bao gồm chín hàm CSS filter chuẩn: blur(), brightness(), contrast(), grayscale(), hue-rotate(), invert(), opacity(), saturate() và sepia().

Làm sao để kết hợp nhiều CSS filter?

Bạn cứ điều chỉnh bao nhiêu filter tùy thích cùng lúc. Thuộc tính filter của CSS cho phép nối nhiều hàm, và công cụ tự động viết chúng ra trong một khai báo filter kết hợp duy nhất.

Làm sao để làm mờ ảnh bằng CSS?

Tăng thanh trượt Blur, vốn ánh xạ tới filter: blur() theo pixel (tối đa 20px ở đây). Quan sát ảnh xem trước, rồi sao chép thuộc tính tạo ra — ví dụ filter: blur(4px);.

Làm sao để chuyển ảnh sang đen trắng bằng CSS?

Đặt thanh trượt Grayscale lên 100%, tạo ra filter: grayscale(100%); cho ảnh đen trắng hoàn toàn. Bất kỳ giá trị nào ở giữa sẽ giảm bão hòa một phần. Mẫu Đen trắng kết hợp điều này với việc tăng contrast.

Các mẫu có sẵn dùng để làm gì?

Mẫu có sẵn là những tổ hợp filter định sẵn tạo nên các phong cách phổ biến. Chẳng hạn Hoài cổ pha sepia với brightness, contrast và saturation đã điều chỉnh. Hãy áp một mẫu làm điểm khởi đầu, rồi tinh chỉnh từng filter theo ý thích.

Ảnh tôi tải lên có bị gửi lên máy chủ không?

Không. Khi bạn tải một ảnh lên, nó được đọc cục bộ bằng FileReader của trình duyệt và chỉ hiển thị trong ảnh xem trước. Ảnh không bao giờ rời khỏi thiết bị của bạn và không được tải lên đâu cả.

Làm sao để đặt lại toàn bộ filter?

Nhấp nút Đặt lại trong bảng mẫu có sẵn để đưa mọi filter về giá trị mặc định, để lại ảnh không áp hiệu ứng nào.

Trình duyệt nào hỗ trợ CSS filter?

Thuộc tính filter của CSS hoạt động trên mọi trình duyệt hiện đại, gồm Chrome, Firefox, Safari và Edge, nên mã bạn sao chép ở đây có thể đưa vào sản phẩm an toàn.