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.
- 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
Đặt Màu bắt đầu và Màu kết thúc, rồi định vị Điểm dừng bắt đầu (0–99%) và Điểm dừng kết thúc (1–100%). Điểm bắt đầu phải đứng trước điểm kết thúc, nếu không trạng thái sẽ chuyển thành KIỂM TRA GIÁ TRỊ.
- 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
Khai báo đơn lẻ phối hợp gọn gàng với các bổ sung background-size hay background-repeat của riêng bạn. Cần màu thứ ba? Sao chép quy tắc và chèn một điểm dừng giữa bằng tay — hai điểm dừng bạn đã tinh chỉnh neo cả hai đầu của pha trộn. Vì chỉ là một dòng, nó cũng dán gọn vào một custom property nếu design system của bạn giữ token theo cách đó.