Cách dùng Trình tạo CSS Mask
- Chọn một hiệu ứng: làm mờ một cạnh, trên và dưới, cả bốn cạnh, vignette, đèn sân khấu hoặc sọc.
- Điều chỉnh kích thước vùng mờ, hướng, vị trí hoặc độ rộng sọc bằng thanh trượt.
- Thử trên ảnh của riêng bạn bằng Dùng ảnh của tôi.
- Sao chép CSS — mã này có
-webkit-mask-image, vì Chrome, Edge và Safari vẫn cần nó cho một số thuộc tính.
Cách hoạt động của CSS mask
mask-image dùng một ảnh hoặc gradient làm khuôn: chỗ mask đặc thì phần tử hiện ra, chỗ mask trong suốt thì phần tử biến mất, còn vùng giữa sẽ mờ dần. Gradient là lựa chọn hữu ích nhất vì không cần thêm file nào:
.hero {
-webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent);
mask-image: linear-gradient(to bottom, #000 70%, transparent);
}- Làm mờ cả bốn cạnh cần kết hợp hai gradient bằng
mask-composite: intersect(và-webkit-mask-composite: source-in), công cụ sẽ tự thêm cho bạn. - Mask không làm thay đổi bố cục hay vùng nhận tương tác — phần bị mờ vẫn có thể click.
- Khác với
opacity, mask có thể làm mờ chỉ một phần của phần tử; khác với lớp phủ gradient, nó hiển thị nền thật phía sau.
Mask hình dạng và clip-path
Hiệu ứng Hình dạng biến một hình clip-path thành SVG nội tuyến dùng làm mask-image. Kết quả trông giống clip-path nhưng cạnh có thể làm mờ viền, và hình có thể được co giãn bằng mask-size và lặp lại bằng mask-repeat.
Nếu muốn cắt hình với cạnh cứng thay vì làm mờ, hãy dùng Trình tạo Clip-path. Với hiệu ứng màu sắc, dùng Trình tạo CSS Filter.
Cũng được tìm dưới tên: css mask generator, mask-image generator, làm mờ viền ảnh css, css gradient mask, hiệu ứng mờ dần ảnh css, css vignette, mask image linear gradient, webkit mask image.
Các công cụ dùng kèm tốt với Trình tạo CSS Mask
- Tạo CSS Gradient — Thiết kế gradient trực quan: kéo các điểm màu, đổi góc hoặc kiểu, chọn sẵn một mẫu có sẵn rồi sao chép CSS dùng được ngay, kèm màu nền đặc làm phương án dự phòng.
- Tạo sóng SVG — Thiết kế đường phân cách section dạng sóng cho landing page: thêm hoặc xóa sóng (tối đa 6, mỗi sóng có màu, độ mờ và hình dạng riêng), chỉnh số đỉnh, chiều cao và độ mượt, chọn màu và đặt sóng ở phía trên hoặc phía dưới.
- Trình tạo Border Radius — Bo tròn các góc của bất kỳ khung nào: kéo một thanh trượt cho tất cả các góc hoặc đặt từng góc riêng, chuyển sang góc elliptical để tạo hình blob và lá, rồi sao chép đoạn CSS border-radius ngắn gọn và hợp lệ nhất.
- Trình tạo Glassmorphism — Thiết kế thẻ kính mờ với thanh trượt xem trước trực tiếp và sao chép CSS tương thích đa trình duyệt, gồm tiền tố -webkit-backdrop-filter và phương án dự phòng cho trình duyệt cũ.
Câu hỏi thường gặp
Làm thế nào để làm mờ viền ảnh bằng CSS?
Áp dụng mask gradient: mask-image: linear-gradient(to bottom, #000 70%, transparent) sẽ làm mờ phần đáy. Để làm mờ cả bốn cạnh, kết hợp gradient ngang và dọc bằng mask-composite: intersect — chọn “Làm mờ cả bốn cạnh” tại đây.
Tôi có còn cần -webkit-mask-image không?
Có, để tương thích tốt nhất. Các trình duyệt dựa trên Chromium và Safari vẫn dựa vào phiên bản -webkit- của một số thuộc tính mask, nên công cụ xuất ra cả hai.
Sự khác biệt giữa mask-image và clip-path là gì?
clip-path cắt một hình có cạnh cứng; mask-image có thể làm mờ dần bằng cách dùng gradient hoặc ảnh làm khuôn.
Làm sao để hình clip-path có viền mềm?
clip-path luôn cắt cạnh cứng. Hãy chọn hiệu ứng Hình dạng tại đây: các hình tương tự sẽ trở thành mask SVG, và thanh trượt Feather làm mờ viền để ảnh mờ dần mượt mà.
Tôi có thể dùng ảnh hoặc SVG làm mask không?
Có — chọn “Ảnh hoặc SVG của tôi làm mask” và tải lên PNG có nền trong suốt hoặc file SVG. Phần đặc sẽ hiển thị phần tử, phần trong suốt sẽ ẩn nó; đặt kích thước, lặp lại và vị trí mask, rồi sao chép CSS và trỏ url() tới file của bạn.
Tôi có thể cài Trình tạo CSS Mask như một ứng dụng web và dùng khi không có mạng không?
Có. Trình tạo CSS Mask là một ứng dụng web (PWA) có thể cài đặt — cài trực tiếp từ trình duyệt, không cần tải từ cửa hàng ứng dụng. Trên Chrome hoặc Edge (Windows, macOS, Linux, ChromeOS) hoặc Android, bấm Cài đặt ứng dụng ở đầu trang này; trên iPhone và iPad, dùng Chia sẻ → Thêm vào Màn hình chính; trên Mac, dùng File → Add to Dock trong Safari 17 trở lên. Sau đó ứng dụng mở trong cửa sổ riêng với biểu tượng riêng, và vì chạy hoàn toàn trên trình duyệt nên vẫn hoạt động khi không có mạng. Firefox trên máy tính không thể cài ứng dụng web. Cách cài đặt hoạt động thế nào.