Làm mờ viền ảnh bằng CSS — Công cụ tạo viền mềm

Vì sao nên làm mờ viền bằng mask?

Gradient mask làm mờ chính ảnh để hòa vào nền phía sau — nền trang, một dải gradient hoặc ảnh khác — thay vì vẽ một lớp phủ màu lên trên. Cách này hoạt động trên mọi nền, trong cả giao diện sáng và tối, và không làm thay đổi file ảnh gốc của bạn.

img.soft {
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 15%, #000 85%, transparent),
                      linear-gradient(to right, transparent, #000 15%, #000 85%, transparent);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}

Hai gradient — một theo chiều dọc, một theo chiều ngang — được kết hợp bằng mask-composite: intersect để cả bốn cạnh đều mờ dần. Muốn hiệu ứng mờ tròn kiểu vignette, hãy dùng CSS Vignette Generator; còn để tạo hình dạng, xem Image Shape Mask.

Cũng được tìm dưới tên: làm mờ viền ảnh css, css fade edges, viền ảnh mềm css, làm mờ ảnh css, css image fade, hiệu ứng viền mờ ảnh, css mask image, ảnh mờ dần về trong suốt css.

Các công cụ dùng kèm tốt với Làm mờ viền ảnh bằng CSS

• 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.
• 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.
• Công cụ tạo CSS Clip-path — Cắt ảnh và phần tử thành hình dạng bất kỳ: chọn một trong 15 hình mẫu có sẵn như tam giác, lục giác, ngôi sao, mũi tên, chevron, bong bóng thoại, hình tròn, hình elip, hình chữ nhật bo góc… rồi kéo các điểm trên ảnh mẫu hoặc ảnh của bạn.
• Trình tạo CSS Filter — Điều chỉnh blur, brightness, contrast, saturation, hue, grayscale, sepia, invert và drop shadow trên ảnh mẫu hoặc ảnh của bạn, rồi sao chép CSS filter.