Tạo Gradient CSS
background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);
Tại sao dùng công cụ tạo gradient trực quan?
Viết gradient CSS thủ công rất phức tạp. Công cụ trực quan của chúng tôi cho phép kiểm soát điểm dừng màu bằng color picker và thanh trượt vị trí với cập nhật thời gian thực.
3 loại gradient
Gradient tuyến tính, xuyên tâm và hình nón — với điều khiển chuyên dụng cho mỗi loại
Gradient nhiều màu
Thêm điểm dừng màu không giới hạn và kéo vị trí cho gradient phức tạp
Xem trước thời gian thực
Xem gradient hiển thị thời gian thực khi điều chỉnh màu, vị trí và góc
Tạo gradient CSS trong 3 bước
Chọn loại gradient
Chọn gradient tuyến tính, xuyên tâm hoặc hình nón và điều chỉnh góc hoặc hướng
Điều chỉnh điểm dừng màu
Đặt màu mỗi điểm dừng bằng color picker và vị trí bằng thanh trượt
Sao chép CSS
Nhấp 'Sao chép CSS' để lấy thuộc tính background đầy đủ để dùng trong stylesheet
Các trường hợp sử dụng gradient CSS
Nền phần hero
Tạo nền toàn màn hình ấn tượng với gradient chéo hoặc xuyên tâm
Văn bản gradient
Áp dụng gradient cho văn bản bằng background-clip:text để có hiệu ứng chữ tuyệt đẹp
Viền gradient
Dùng gradient với border-image để tạo khung màu xung quanh phần tử
Lớp phủ hình ảnh
Đặt gradient lên ảnh để tạo lớp phủ tối đảm bảo khả năng đọc văn bản
Các thực hành tốt nhất cho gradient CSS
✓ Dùng 135deg cho gradient chéo
Góc 135 độ tạo đường chéo cổ điển từ góc trái trên xuống phải dưới.
✓ Giữ gradient tinh tế trong UI
Trong phần tử UI như nút và card, dùng gradient rất tinh tế với chênh lệch độ sáng 10-20% để tạo chiều sâu.
✓ Đặt màu dự phòng
Thêm màu nền solid làm dự phòng: background-color:#6366f1; background:linear-gradient(...).
✓ Smooth gradient bằng cách animate background-position
Không thể animate gradient CSS trực tiếp, nhưng có thể animate background-position trên gradient lớn hơn để có hiệu ứng chuyển động mượt mà.
❓ Câu hỏi thường gặp
Sự khác biệt giữa gradient tuyến tính, xuyên tâm và hình nón là gì?
Gradient tuyến tính chuyển tiếp dọc theo một đường thẳng theo góc. Xuyên tâm tỏa ra từ điểm trung tâm theo hình tròn hoặc elip. Hình nón xoay quanh điểm trung tâm — lý tưởng cho chỉ số tiến trình hình tròn.
Làm thế nào để tạo gradient trong suốt?
Dùng transparent làm điểm dừng màu: linear-gradient(to bottom, rgba(0,0,0,0.8), transparent). Tạo gradient từ màu bán trong suốt đến hoàn toàn trong suốt — lý tưởng cho lớp phủ ảnh.
Tại sao tôi thấy các sọc trong gradient?
Sọc (đường thấy được giữa các màu) xuất hiện trên màn hình chất lượng thấp hoặc khi chuyển tiếp giữa các sắc thái tương tự. Thêm điểm dừng màu trung gian để làm mượt quá trình chuyển tiếp.
Gradient có thể được dùng làm viền không?
Có; dùng border-image:linear-gradient(...) 1. Ngoài ra, pseudo-element ::before với nền gradient và z-index âm có thể mô phỏng viền gradient.