Trình tạo độ dốc CSS

Dải màu CSS là một "hình ảnh" do trình duyệt vẽ ngay lập tức, chỉ cần đặt vào background hoặc background-image mà không phải tải tệp ảnh, và luôn sắc nét ở mọi kích thước. Cú pháp tuyến tính là linear-gradient(góc, điểm màu 1, điểm màu 2, …). 0deg chạy từ dưới lên, 90deg từ trái sang phải, mặc định 180deg từ trên xuống; 135deg là đường chéo phổ biến từ góc trên trái xuống góc dưới phải. radial-gradient lan tỏa từ tâm ra ngoài, hợp để làm hiệu ứng đèn chiếu, quầng sáng hoặc tạo khối cho nút bấm.

Mỗi điểm màu gồm màu và vị trí, ví dụ #f59e0b 0% và #10b981 100%. Thêm điểm màu ở giữa giúp điều chỉnh nhịp chuyển màu; đặt hai điểm màu cùng một vị trí (như 50% và 50%) sẽ khiến màu đổi đột ngột, tạo sọc sắc nét hoặc nền chia đôi. Trong công cụ này, mỗi điểm màu có vị trí và độ trong suốt riêng; độ trong suốt được xuất dưới dạng rgba(), rất tiện để làm lớp phủ giúp chữ trắng dễ đọc trên ảnh.

Vài mẹo thực tế: nếu hai đầu của một dải màu lớn cách xa nhau trên vòng màu, phần giữa dễ bị xám đục; hãy thêm màu trung gian hoặc chọn các sắc độ gần nhau. Dải màu quá nhạt có thể lộ các bậc màu (banding) trên một số màn hình; tăng nhẹ độ chênh lệch hoặc thêm điểm màu thứ ba sẽ cải thiện. Muốn làm chữ chuyển màu, đặt dải màu làm nền rồi kết hợp background-clip: text và color: transparent.

Các trình duyệt hiện đại đã hỗ trợ linear-gradient và radial-gradient không cần tiền tố từ nhiều năm nay, nên mã CSS sao chép dùng được ngay mà không cần -webkit-. Hãy bắt đầu từ một mẫu có sẵn, chỉnh góc và điểm màu, xem trước trực tiếp rồi sao chép mã chỉ với một cú nhấp.