Tạo gradient CSS

Cách sử dụng

1. Chọn kiểu và kéo góc cho tới khi phần xem trước ưng ý.
2. Thêm điểm màu nếu cần gradient nhiều hơn hai màu.
3. Để trống vị trí để CSS tự canh đều các điểm màu.
4. Sao chép khai báo vào stylesheet.

Tính năng

• Kiểu tuyến tính, tỏa tròn và hình nón, kèm tùy chọn lặp lại.
• Nhận mọi cách viết màu và quy về dạng hex.
• Vị trí là tùy chọn — để trống nghĩa là canh đều, thường đúng ý bạn nhất.
• Xem trước toàn khung đúng đoạn CSS đang được tạo ra.
• Chạy hoàn toàn trong trình duyệt.

Câu hỏi thường gặp

Vì sao nên để trống vị trí của điểm màu?

Vì CSS tự canh đều những điểm màu không có vị trí, và đó gần như luôn là ý bạn muốn. Cố định vị trí là cách tạo ranh giới sắc nét hoặc chuyển màu lệch tâm — hữu ích khi cố ý, và phiền toái khi nó xảy ra chỉ vì công cụ tự ghi thêm `50%` mà bạn không yêu cầu.

Vì sao thêm màu thứ ba lại làm dịch phần giữa?

Vì gradient là một danh sách điểm màu chứ không phải một điểm đầu và một điểm cuối. Ba điểm màu không có vị trí sẽ nằm ở 0%, 50% và 100%, nên màu thứ hai rơi vào giữa còn hai màu ban đầu vẫn giữ hai đầu. Muốn màu mới ở chỗ khác thì hãy đặt vị trí cho nó.

Gradient hình nón dùng để làm gì?

Màu quét quanh một tâm thay vì chạy dọc một đường. Đó là thứ tạo ra biểu đồ tròn, vòng chọn màu hay vòng tiến độ chỉ bằng CSS. Góc quyết định nơi bắt đầu quét.

Công cụ liên quan