Trình tạo gradient CSS

Công cụ này làm gì

Trình tạo gradient CSS cho phép bạn thiết kế gradient bằng mắt rồi sao chép CSS hoàn chỉnh. Chọn gradient tuyến tính, tỏa tròn hoặc hình nón, thêm bao nhiêu điểm màu tùy thích, kéo vị trí, đặt góc hoặc tâm, và bản xem trước cập nhật ngay lập tức. Bạn cũng có thể dán linear-gradient(…), radial-gradient(…) hoặc conic-gradient(…) có sẵn để chỉnh sửa trực quan. Mọi thứ chạy trong trình duyệt của bạn.

Cách sử dụng

1. Bắt đầu từ một mẫu có sẵn hoặc giữ gradient ví dụ.
2. Chọn Loại. Gradient tuyến tính và hình nón có góc; gradient tỏa tròn và hình nón có tâm, di chuyển bằng Tâm X và Tâm Y.
3. Chỉnh Điểm màu: đổi màu bằng bộ chọn hoặc gõ bất kỳ màu CSS nào, kéo Vị trí để di chuyển, dùng + Thêm điểm màu để chèn vào khoảng trống lớn nhất, và Đảo ngược để lật thứ tự.
4. Bật Lặp lại để lát gradient thành sọc và vòng.
5. Sao chép mã từ thẻ CSS, có thể kèm màu đặc dự phòng cho trình duyệt rất cũ.

Ô CSS gradient ở dưới cùng hiển thị giá trị gradient và có thể chỉnh sửa: dán gradient từ stylesheet hoặc công cụ thiết kế, các điều khiển sẽ tự đọc theo.

Ví dụ

.hero {
  background-color: #667eea;
  background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

Mẹo để có gradient đẹp

• Giữ tinh tế. Hai sắc độ gần nhau (xanh sang tím, cam sang hồng) chuyển mượt hơn hai màu đối lập, vốn dễ thành xám đục ở giữa.
• Thêm điểm màu ở giữa để kiểm soát sự pha trộn. Điểm thứ ba sáng hơn hai bên một chút tạo vùng sáng mềm.
• Điểm cứng tạo hình. Các điểm cùng vị trí tạo cạnh sắc: sọc, cờ, thanh tiến trình và biểu đồ tròn đều dùng mẹo này.
• Hướng. to right bằng 90deg và to bottom (mặc định) bằng 180deg. Góc tính theo chiều kim đồng hồ từ phía trên.
• Chữ trên gradient phải dễ đọc trên toàn bộ gradient. Kiểm tra điểm sáng nhất và tối nhất với màu chữ bằng công cụ kiểm tra độ tương phản.