Hiệu ứng ánh sáng lan tỏa (Glow Effect) hay Gradient mờ ảo đang là một trong những phong cách thiết kế được ưa chuộng nhất hiện nay. Thay vì dùng các dải màu gradient cứng nhắc, việc kết hợp các hình khối với hiệu ứng Layer blur sẽ tạo ra một dải ánh sáng tự nhiên, mềm mại và vô cùng bắt mắt cho giao diện của bạn. Bài viết này sẽ hướng dẫn bạn chi tiết từng bước để tái tạo hiệu ứng này (thường thực hiện trên Figma hoặc các phần mềm thiết kế UI).
Chuẩn bị:
Tạo một Frame hoặc Artboard với nền tối (Dark mode) để hiệu ứng ánh sáng được nổi bật nhất (ví dụ mã màu nền là #1A1A24 hoặc Đen thuần).
Các Bước Thực Hiện Chi Tiết:
Bước 1: Tạo các khối hình cơ bản (Shapes)
Vẽ 3 khối hình (có thể là hình elip hoặc các đường cong tự do - blobs) xếp chồng lên nhau ở viền dưới của khung thiết kế.
Đổ màu cho từng lớp theo thứ tự từ trên xuống dưới. Trong ví dụ mặc định, chúng ta sẽ dùng hệ màu Hoàng hôn:
Đây là bước "phép thuật" để làm mờ các khối hình sắc nét thành dải ánh sáng. Chọn từng layer và thêm hiệu ứng Layer Blur với các thông số khác nhau để tạo độ sâu:
Để màu sắc hòa quyện vào nhau rực rỡ hơn và ăn nhập với nền đen, bạn cần tinh chỉnh phần Appearance (thường áp dụng cho một group chứa cả 3 khối hoặc tinh chỉnh thêm trên các lớp màu):
Bạn hoàn toàn có thể biến tấu hiệu ứng này với nhiều sắc thái khác nhau. Dưới đây là bảng so sánh các mã màu gợi ý để bạn dễ dàng lựa chọn áp dụng:
Chuẩn bị:
Tạo một Frame hoặc Artboard với nền tối (Dark mode) để hiệu ứng ánh sáng được nổi bật nhất (ví dụ mã màu nền là #1A1A24 hoặc Đen thuần).
Các Bước Thực Hiện Chi Tiết:
Bước 1: Tạo các khối hình cơ bản (Shapes)
Vẽ 3 khối hình (có thể là hình elip hoặc các đường cong tự do - blobs) xếp chồng lên nhau ở viền dưới của khung thiết kế.
Đổ màu cho từng lớp theo thứ tự từ trên xuống dưới. Trong ví dụ mặc định, chúng ta sẽ dùng hệ màu Hoàng hôn:
- Lớp trên cùng (To nhất): #FF3636 (Đỏ)
- Lớp ở giữa: #FFE436 (Vàng)
- Lớp dưới cùng (Nhỏ nhất, nằm ở lõi): #FFFFFF (Trắng)
Đây là bước "phép thuật" để làm mờ các khối hình sắc nét thành dải ánh sáng. Chọn từng layer và thêm hiệu ứng Layer Blur với các thông số khác nhau để tạo độ sâu:
- Khối màu Đỏ (Lớp ngoài cùng): Set Blur = 100
- Khối màu Vàng (Lớp giữa): Set Blur = 80
- Khối màu Trắng (Lớp lõi): Set Blur = 50
Để màu sắc hòa quyện vào nhau rực rỡ hơn và ăn nhập với nền đen, bạn cần tinh chỉnh phần Appearance (thường áp dụng cho một group chứa cả 3 khối hoặc tinh chỉnh thêm trên các lớp màu):
- Giảm Opacity (Độ trong suốt) xuống còn 90%.
- Đổi Blend Mode (Chế độ hòa trộn) sang Plus lighter (hoặc Screen/Color Dodge tùy phần mềm) để tạo độ phát sáng rực rỡ (glowing).
Bạn hoàn toàn có thể biến tấu hiệu ứng này với nhiều sắc thái khác nhau. Dưới đây là bảng so sánh các mã màu gợi ý để bạn dễ dàng lựa chọn áp dụng:
| Phong cách thiết kế | Màu Lớp Ngoài Cùng (Blur 100) | Màu Lớp Giữa (Blur 80) | Màu Lớp Lõi (Blur 50) |
| Hoàng Hôn (Mặc định) | #FF3636 (Đỏ) | #FFE436 (Vàng) | #FFFFFF (Trắng) |
| Cyberpunk (Tím Hồng) | #6F1BFF (Tím đậm) | #EE36FF (Hồng Neon) | #FFFFFF (Trắng) |
| Đại Dương (Xanh Dương) | #0038FF (Xanh dương đậm) | #00C8FF (Xanh lam nhạt) | #FFFFFF (Trắng) |
| Toxic/Eco (Xanh Lá) | #0ECD00 (Xanh lá đậm) | #AEFF00 (Xanh chuối) | #FFFFFF (Trắng) |
