Trình tạo hình nền gradient
Gradient ba màu mềm mại với độ mờ mạnh là phong cách nền của mọi trang đích SaaS và của hầu hết hình nền máy tính để bàn ra mắt trong bốn năm gần đây. Công cụ này pha trộn ba màu ở dạng mã hex với góc có thể điều chỉnh và hiệu ứng mờ Gauss, sau đó xuất kết quả ở độ phân giải phù hợp với máy tính để bàn, điện thoại hoặc nền Zoom.
Cách tạo hình nền gradient
-
1
Chọn ba màu
Điều chỉnh trực tiếp các giá trị hex hoặc nhấn Ngẫu nhiên để có một bảng màu bất ngờ.
-
2
Đặt góc
0–360°. 135° là đường chéo kiểu "hoàng hôn"; 90° là kiểu pha trộn theo phương ngang kiểu "bình minh".
-
3
Điều chỉnh độ mờ
Độ mờ cao hơn sẽ che đi ranh giới giữa các màu và làm mượt toàn bộ khung vẽ.
-
4
Xuất hình ảnh
Tải xuống ở độ phân giải phù hợp với màn hình hoặc điện thoại của bạn.
Kích thước đầu ra được khuyến nghị
| Mục tiêu | Độ phân giải |
|---|---|
| Máy tính để bàn 4K | 3840 × 2160 |
| Máy tính để bàn 1440p | 2560 × 1440 |
| Máy tính để bàn 1080p | 1920 × 1080 |
| iPhone 15/16 | 1179 × 2556 |
| Android (hiện đại) | 1080 × 2400 |
| Nền ảo Zoom | 1920 × 1080 |
Các gợi ý phối màu luôn hiệu quả
- Cặp màu bổ túc + màu trung tính: xanh dương, cam, be.
- Bộ ba tương đồng: chọn ba tông màu nằm trong phạm vi 60° trên vòng tròn màu, tím, magenta và hồng.
- Tương phản nóng-lạnh: một màu nóng (đào, đỏ), một màu lạnh (xanh mòng két, xanh navy) và một màu trung tính (kem).
- Đơn sắc: một tông màu ở ba mức độ sáng tạo nên một bức tường tinh tế, đồng nhất về không khí.
Vì sao độ mờ lại quan trọng
Một gradient ba điểm dừng không làm mờ sẽ hiển thị ranh giới sắc nét tại các điểm dừng màu (“hiệu ứng cầu vồng”). filter: blur() với độ lớn 60–100 px trên một khung vẽ lớn sẽ làm mượt các chuyển tiếp thành những mảng màu loang gợi nhớ đến hình nền của macOS Big Sur hoặc iOS 16.
Xem trước CSS trực tiếp
background: linear-gradient(135deg, #FF6B35, #7B2D26, #1E3A8A);
filter: blur(80px);
Nếu bạn muốn một gradient sắc nét mà không làm mờ, hãy giảm giá trị bộ lọc về 0 và cân nhắc chuyển sang phương pháp nội suy in oklch để có được sự pha trộn đều về mặt thị giác.
Câu hỏi thường gặp
Bộ lọc làm mờ lấy mẫu các điểm ảnh nằm ngoài khung vẽ, và những điểm này trong suốt. Với hình nền, hãy tạo ở kích thước lớn hơn, làm mờ, rồi cắt về độ phân giải cuối cùng, các cạnh sẽ vẫn sạch.
Trình tạo này dùng ba màu. Nhiều màu hơn thường tạo cảm giác như một trình bảo vệ màn hình; ba màu là mức lý tưởng cho một hình nền dịu mắt.
Không hẳn. Tỷ lệ màn hình điện thoại cao hơn máy tính để bàn, nên góc chéo được cảm nhận khác đi. Hãy xem trước ở từng kích thước mục tiêu và điều chỉnh góc nếu có kích thước nào trông chưa ưng ý.
Không. Khung vẽ được vẽ cục bộ và chỉ có bản tải xuống mà bạn tự kích hoạt mới rời khỏi trình duyệt.
Công cụ liên quan
Trình chuyển đổi Binary sang Hex
Chuyển input binary thành giá trị hexadecimal chữ hoa đơn giản. Ký tự không phải 0 hoặc 1 bị bỏ qua và số 0 ở đầu không được giữ lại.
Trình tạo bảng màu
Tạo bảng màu đơn sắc, tương đồng, bổ túc, bộ ba hoặc bộ bốn từ màu HEX gốc và xuất các biến CSS sẵn sàng sao chép.
Trình tạo màu ngẫu nhiên
Tạo từ 1 đến 50 màu HEX ngẫu nhiên kèm mẫu màu để xem trước, sao chép và dùng trong CSS, kiểm thử hoặc khám phá bảng màu.
Trình tạo bảng màu ngẫu nhiên
Tạo bảng màu ngẫu nhiên từ 2 đến 15 mẫu màu, chọn phong cách rực rỡ, pastel, dịu hoặc tối, rồi sao chép mã HEX hoặc biến CSS.
Bộ chuyển đổi Base64 sang Hex
Chuyển chuỗi Base64 thành các byte nền tảng được biểu diễn dưới dạng hệ thập lục phân (hex). Hữu ích để kiểm tra token, khóa, chứng chỉ và JWT.
Bộ chọn màu HEX
Chọn màu bằng mắt và xem ngay giá trị HEX, RGB, HSL, HSV, CMYK cùng độ tương phản trên nền trắng và đen.