Cách dùng Mask Hình Ảnh Theo Hình Dạng
- Chọn một hình dạng — giống các hình trong công cụ clip-path, cộng thêm hình trái tim.
- Tăng Feather để có viền mềm, hoặc giữ ở 0 để có đường cắt sắc nét.
- Thay đổi Size để thu nhỏ hình bên trong phần tử và thử Dùng ảnh của tôi.
- Sao chép CSS — hình được tạo bằng SVG nội tuyến nên bạn không cần thêm tệp nào.
Mask hình dạng và clip-path
clip-path cắt hình với đường viền sắc nét và là lựa chọn đơn giản nhất khi bạn cần viền cứng. Mask hình dạng dùng SVG làm mask-image: nó có thể có viền mờ, mềm mại, có thể co giãn bằng mask-size và định vị bằng mask-position, và hoạt động với mọi hình SVG — kể cả logo riêng của bạn (chọn “Ảnh hoặc SVG của tôi làm mask”).
Nếu cần hình có viền cứng và các điểm kéo thả, hãy dùng Clip-path Generator; với hình hữu cơ, hãy thử SVG Blob Generator.
Cũng được tìm dưới tên: mask ảnh theo hình dạng, css cắt ảnh theo hình, css mask hình ảnh, ảnh hình trái tim css, ảnh hình ngôi sao css, ảnh lục giác css, cắt hình css, css mask svg.
Các công cụ dùng kèm tốt với Mask Hình Ảnh Theo Hình Dạng
- Trình tạo CSS Mask — Làm cho ảnh và khối nội dung mờ dần thay vì kết thúc đột ngột: làm mờ một cạnh, trên và dưới, cả bốn cạnh, vignette tròn hoặc đèn sân khấu, cắt phần tử thành các dải sọc — hoặc che phần tử bằng một hình dạng (ngôi sao, trái tim, lục giác, mũi tên…) với viền mềm, mờ dần mà clip-path không làm được.
- Làm mờ viền ảnh bằng CSS — Tạo viền ảnh mềm, mờ dần chỉ với một quy tắc CSS — không cần chỉnh sửa ảnh.
- 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.
- Công cụ tạo tam giác CSS — Tạo tam giác thuần CSS cho mũi tên tooltip, dấu caret dropdown hoặc bong bóng thoại: chọn một trong 8 hướng, nhập chiều rộng, chiều cao và màu, rồi sao chép mã theo kỹ thuật border cổ điển hoặc phiên bản clip-path đơn giản hơn.
Câu hỏi thường gặp
Làm thế nào để đặt ảnh vào trong hình trái tim hoặc ngôi sao?
Chọn hình tại đây và sao chép CSS: nó đặt một SVG nội tuyến của hình đó làm mask-image cho ảnh của bạn, nên chỉ phần bên trong hình được hiển thị.
Hình có thể có viền mềm không?
Có — tăng Feather. Hình SVG sẽ được làm mờ nên ảnh mờ dần ở mép. clip-path không làm được điều này; nó luôn cắt viền cứng.
Tôi có thể dùng hình hoặc logo riêng không?
Có — chọn “Ảnh hoặc SVG của tôi làm mask” và tải lên tệp PNG có nền trong suốt hoặc tệp SVG.
Tôi có thể cài Mask Hình Ảnh Theo Hình Dạng như một ứng dụng web và dùng khi không có mạng không?
Có. Mask Hình Ảnh Theo Hình Dạng 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.