Lộ trình tác vụ / từ đầu vào đến kết quả
Cách tổ hợp một gradient CSS
- 01
Chọn kiểu gradient
Mở Kiểu gradient và chọn Tuyến tính cho một pha trộn thẳng hoặc Tỏa tròn cho một pha trộn hình tròn. Huy hiệu xem trước hiển thị góc hiện tại trong lúc bạn làm việc. 2–16 Điểm màu · Tuyến tính / Hướng tâm · Thêm / Xóa / Đảo ngược / Ngẫu nhiên
- 02
Đặt hướng hoặc tiêu điểm
Hướng / tiêu điểm chạy từ 0 đến 360. Với gradient tuyến tính đó là góc tính bằng độ; với gradient tỏa tròn nó đặt tiêu điểm lên một vòng quanh tâm. Huy hiệu cập nhật giá trị trực tiếp, khiến các hiệu chỉnh nhỏ dễ đánh giá.
- 03
Chọn màu và điểm dừng
Thêm 2–16 điểm màu. Vị trí từ 0%–100% phải không giảm; vị trí bằng nhau tạo ranh giới sắc nét. Sửa, xóa, đảo hoặc chọn ngẫu nhiên các điểm rồi kiểm tra bản xem trước.
- 04
Kiểm soát dải pha trộn
Khoảng cách giữa hai điểm dừng là vùng chuyển tiếp: hai điểm cách nhau 1% tạo một mép gần như cứng cho sọc hai tông, trong khi điểm ở 0% và 100% — các mặc định — cho pha trộn mềm nhất toàn chiều rộng. Hãy nhìn bản xem trước chứ đừng nhìn con số.
- 05
Sao chép khai báo
Nhấn Sao chép CSS hoặc Tải xuống .css để lưu toolars-gradient.css. Quy tắc .gradient là một khai báo background duy nhất — linear-gradient(…deg, …) hoặc radial-gradient(circle at …, …) — khớp chính xác với các điểm dừng của bạn.
- 06
Áp dụng và mở rộng
Xuất kết quả hiện tại. HTML chứa CSS hiện tại và ví dụ hoạt động. Điều khiển gốc hỗ trợ bàn phím.