Tạo gradient CSS
Thiết kế gradient tuyến tính và hướng tâm một cách trực quan, rồi sao chép CSS sẵn dùng. Mọi thứ cập nhật trực tiếp trong trình duyệt của bạn.
Cách tạo gradient CSS
- Chọn tuyến tính hoặc hướng tâm, rồi đặt góc cho gradient tuyến tính.
- Chọn màu cho các điểm dừng và đặt vị trí từ 0 đến 100.
- Thêm hoặc bớt điểm dừng để định hình sự chuyển đổi theo ý bạn.
- Sao chép CSS đã tạo vào bảng định kiểu hoặc thuộc tính style của bạn.
Câu hỏi thường gặp
Gradient tuyến tính là gì?
Gradient tuyến tính pha trộn màu dọc theo một đường thẳng ở góc bạn chọn, từ 0 đến 360 độ.
Gradient hướng tâm là gì?
Gradient hướng tâm pha trộn màu từ một điểm trung tâm ra ngoài theo hình tròn hoặc hình elip.
Các con số vị trí nghĩa là gì?
Mỗi vị trí là phần trăm dọc theo gradient, từ 0% ở đầu đến 100% ở cuối. Các điểm dừng được sắp xếp theo vị trí tự động.
Gradient có hoạt động trên mọi trình duyệt không?
Có. CSS tạo ra dùng các hàm chuẩn linear-gradient và radial-gradient được mọi trình duyệt hiện đại hỗ trợ.
Công cụ liên quan
Vì sao dùng công cụ tạo gradient?
Dùng công cụ tạo gradient CSS để thiết kế sự chuyển màu mượt mà một cách trực quan thay vì đoán giá trị trong code, và sao chép CSS sẵn sàng dùng ngay lập tức.
- Xem gradient thay đổi trực tiếp khi bạn điều chỉnh màu, góc và điểm dừng.
- Sao chép CSS chính xác, hợp lệ mà không phải săn lỗi cú pháp.
- Tạo nền nhiều điểm dừng cho nút, banner và khối trong vài giây.
Mẹo và giới hạn
Bạn có thể thêm bao nhiêu điểm dừng màu tùy thích, và công cụ giữ ít nhất hai để gradient luôn hợp lệ. Các điểm dừng được sắp xếp theo vị trí trước khi tạo CSS.