Nhà phát triển / CSS
Trình tạo gradient CSS
Thiết kế gradient tuyến tính, xuyên tâm hoặc hình nón với xem trước trực tiếp, số điểm dừng màu tùy ý và các mẫu có sẵn, rồi sao chép CSS.
Trình tạo gradient CSS: Trình tạo viết khai báo background mà trình duyệt cần cho gradient bạn thấy: linear-gradient với một góc, radial-gradient với hình tròn hoặc elip bắt đầu từ tâm, hoặc conic-gradient xoay quanh tâm từ một góc bắt đầu, mỗi loại đều có các điểm dừng màu theo đúng thứ tự. Một màu đồng nhất được đặt đầu tiên làm màu dự phòng cho các trình duyệt quá cũ không thể hiển thị gradient. Màu mới được thêm vào khoảng cách lớn nhất và pha trộn từ các màu lân cận, để gradient không bị giật. Chạy 100% cục bộ trong trình duyệt của bạn, không có tệp nào được tải lên máy chủ.
- Danh mục
- Công cụ lập trình viên
- Lượt chạy
- Trong trình duyệt của bạn
- Chi phí
- Miễn phí · không cần đăng ký
- Trạng thái khả dụng
- Sẵn sàng sử dụng
Chạy hoàn toàn trong trình duyệt của bạn
CSS
background: #ff7e5f; background: linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%);
Dòng đầu tiên là màu đơn dành cho các trình duyệt rất cũ; mọi trình duyệt hiện tại đều sử dụng dải màu ở dòng thứ hai.
Cài đặt sẵn
Dải màu chuyển mượt mà
Sự pha trộn giữa hai màu rất khác nhau, chẳng hạn từ xanh dương sang vàng, sẽ đi qua màu xám xỉn ở giữa. Thêm một điểm dừng ở giữa với màu sáng hơn sẽ giúp dải màu sinh động hơn. Các dải màu giữa những màu lân cận, chẳng hạn từ cam sang hồng, hiếm khi cần điều chỉnh.
Hãy chọn hoặc kiểm tra màu bằng bộ chuyển đổi màu, và thêm chiều sâu cho thẻ bằng trình tạo đổ bóng hộp.
Văn bản trên dải màu
Hãy kiểm tra để văn bản vẫn dễ đọc ở cả hai đầu dải màu, không chỉ ở phần giữa. Dải màu tối hơn với văn bản trắng hoặc dải màu nhẹ phía sau văn bản tối sẽ an toàn hơn cầu vồng rực rỡ.
Cách sử dụng
- Chọn một mẫu có sẵn hoặc chọn tuyến tính, xuyên tâm hay hình nón.
- Đặt góc, điều chỉnh màu và vị trí của chúng; thêm màu để có nhiều điểm dừng hơn.
- Sao chép CSS vào bảng định kiểu của bạn.
Quyền riêng tư và giới hạn
Mọi thứ đều chạy trong trình duyệt của bạn; gradient gần đây nhất của bạn chỉ được lưu trong trình duyệt này.
Công cụ liên quan
Câu hỏi thường gặp
Góc trong gradient tuyến tính có ý nghĩa gì?
0deg chạy từ dưới lên trên, 90deg từ trái sang phải, 180deg từ trên xuống dưới và 270deg từ phải sang trái. Gradient được vẽ theo hướng đó, vì vậy 135deg chạy từ góc trên bên trái đến góc dưới bên phải.
Điểm dừng màu là gì?
Đó là một màu và vị trí từ 0% đến 100% trên gradient, nơi màu đó đạt đến chính xác. Giữa hai điểm dừng, các màu hòa trộn với nhau; đặt hai điểm dừng tại cùng một vị trí sẽ tạo ra một mép cứng thay vì chuyển màu, đây là cách tạo các sọc.
Gradient hình nón khác gradient xuyên tâm như thế nào?
Gradient xuyên tâm thay đổi màu từ tâm hướng ra ngoài, tạo thành các vòng. Gradient hình nón thay đổi màu quanh tâm giống như kim đồng hồ, phù hợp để tạo bánh xe màu và biểu đồ tròn.
Tôi còn cần tiền tố -webkit- không?
Không. Mọi trình duyệt hiện nay đều hỗ trợ linear-gradient và radial-gradient mà không cần tiền tố, còn conic-gradient đã hoạt động trên tất cả các trình duyệt đó từ năm 2021. Màu dự phòng ở dòng đầu tiên chỉ dành cho các trình duyệt cũ hơn rất nhiều.
Công cụ miễn phí · trong trình duyệt của bạn lượt chạy · không cần tài khoản