Hướng dẫn tạo hiệu ứng chùm sáng (Glow Effect) đa tầng cực ảo trong Figma

Bạn muốn tạo một điểm nhấn ánh sáng nổi bật và có độ sâu cho giao diện thiết kế? Bài viết này sẽ phân tích một thủ thuật nhỏ trong Figma giúp bạn kết hợp Linear Gradient, Layer Blur và Blend Mode để tạo ra một chùm sáng chân thực chỉ với vài thao tác cơ bản.

Chi tiết các bước thực hiện​

Bí quyết của hiệu ứng này nằm ở việc xếp chồng 3 lớp hình khối (shape) dạng phễu ánh sáng lên nhau. Mỗi lớp sẽ đảm nhận một vai trò sắc độ riêng biệt. Dưới đây là cách thực hiện:

Tạo 1 Frame mới khoảng 480px480px

1. Tạo lớp ánh sáng nền bao phủ​

• Vẽ một shape dạng chùm sáng dài (như hình trên cùng).
• Trong mục Fill, thiết lập chế độ Linear Gradient hướng từ trên xuống dưới.
• Dải màu: Điểm bắt đầu (0%) là màu cam #DC5001 với độ hiển thị 100%. Điểm kết thúc (100%) là màu đen #000000 với độ hiển thị 0%.
• Thêm hiệu ứng Effects > Layer blur (Uniform) và đặt thông số Blur là 22.5.

2. Tạo lớp lõi ánh sáng mờ​

• Nhân bản hoặc tạo một shape tương tự xếp đè lên chính giữa để làm phần lõi sáng.
• Tiếp tục sử dụng Linear Gradient.
• Dải màu: Điểm bắt đầu (0%) vẫn giữ màu cam #DC5001 nhưng hãy giảm Opacity xuống chỉ còn 25%. Điểm kết thúc (100%) là màu đen #000000 với 0%.
• Thêm hiệu ứng Layer blur (Uniform) với thông số Blur là 19. Lớp mờ này sẽ giúp tổng thể ánh sáng hòa trộn mượt mà hơn.

3. Tạo tâm phát sáng chói lóa​

• Vẽ một shape ngắn hơn, phần đỉnh bè ra hai bên (như hình dưới cùng) để làm gốc phát ra ánh sáng.
• Dùng Linear Gradient.
• Dải màu: Ở bước này, điểm bắt đầu (0%) đổi thành màu trắng #FFFFFF nguyên bản 100%. Điểm kết thúc (100%) vẫn là màu đen #000000 0%.
• Thêm Layer blur (Uniform) và đẩy thông số Blur lên mức cao nhất là 33.
• Điểm mấu chốt: Hãy đổi chế độ hòa trộn (Blend mode) của lớp này thành Plus lighter. Điều này sẽ tạo ra độ rực chói cường độ cao ở ngay tâm điểm.

Kết quả: