Tạo màu gradient CSS
Tạo màu chuyển sắc (gradient) CSS tuyến tính, tỏa tròn, hình nón với tối đa 8 điểm màu, chỉnh độ đậm, chọn mẫu có sẵn, sao chép mã CSS hoặc tải ảnh PNG.
Mẫu có sẵn
Mã CSS
background: #ff7e5f;
background: linear-gradient(90deg, #ff7e5f 0%, #feb47b 100%);Gradient tuyến tính, tỏa tròn và hình nón chạy được trên mọi trình duyệt hiện nay. Tạo ngay trên trình duyệt của bạn.
Công cụ này đang tạm ngừng hoạt động.
Vui lòng quay lại sau.
Cách sử dụng
- 1Chọn một mẫu có sẵn hoặc giữ gradient mặc định.
- 2Chọn kiểu tuyến tính, tỏa tròn hoặc hình nón, rồi chỉnh góc hoặc hình dạng.
- 3Chỉnh màu, vị trí, độ đậm của từng điểm màu; thêm tối đa 8 điểm.
- 4Sao chép mã CSS, hoặc tải gradient về dạng ảnh PNG.
Tính năng
- Gradient tuyến tính (linear), tỏa tròn (radial: tròn hoặc elip) và hình nón (conic).
- Tối đa 8 điểm màu, chỉnh độ trong suốt từng điểm.
- 8 mẫu gradient có sẵn để bắt đầu nhanh.
- Mã CSS có màu dự phòng, sao chép một chạm.
- Tải ảnh PNG 1920×1080 làm hình nền, slide.
Quyền riêng tư
Gradient được tạo ngay trên trình duyệt của bạn.
Câu hỏi thường gặp
Dùng mã CSS thế nào?
Dán hai dòng vào khối CSS của phần tử, ví dụ .banner { … }. Dòng đầu là màu đơn dự phòng, dòng sau là gradient.
Trình duyệt nào hỗ trợ conic-gradient?
Tất cả phiên bản hiện nay của Chrome, Edge, Firefox, Safari và Cốc Cốc. Trình duyệt quá cũ sẽ hiện màu dự phòng.
Làm sao để có ranh giới màu sắc nét?
Đặt hai điểm màu ở cùng một vị trí, ví dụ đỏ ở 50% và xanh ở 50%, sẽ ra hai mảng màu tách bạch thay vì chuyển dần.
Tạo gradient trong suốt được không?
Được. Giảm độ đậm của một điểm màu, mã CSS sẽ dùng rgba() để gradient mờ dần vào phần nền phía sau.