Tạo Vignette CSS — Hiệu Ứng Mờ Dần Hình Tròn Cho Ảnh

Vignette với mask-image

.vignette {
  -webkit-mask-image: radial-gradient(ellipse at center, #000 40%, transparent 75%);
          mask-image: radial-gradient(ellipse at center, #000 40%, transparent 75%);
}

Phần giữa giữ nguyên độ hiển thị đến điểm dừng đầu tiên rồi mờ dần thành trong suốt ở điểm dừng thứ hai. Khác với lớp phủ tối, mask vignette làm ảnh hòa vào nền thật của trang, nên hoạt động với mọi màu nền. Muốn làm mờ theo đường thẳng, xem Làm Mờ Cạnh Ảnh Bằng CSS.

Cũng được tìm dưới tên: css vignette, hiệu ứng vignette css, css radial fade, radial gradient mask, tạo vignette online, css làm mờ viền ảnh, hiệu ứng tròn mờ ảnh css.

Các công cụ dùng kèm tốt với Tạo Vignette 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.
• Mask Hình Ảnh Theo Hình Dạng — Đặt bất kỳ bức ảnh nào vào trong một hình — ngôi sao, trái tim, lục giác, hình tròn, mũi tên, bong bóng thoại… — bằng CSS mask-image.
• 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.
• 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.