Công cụ làm gì?
Công cụ Tạo CSS Gradient giúp bạn tạo gradient hai màu, tùy chỉnh góc và sao chép mã CSS chỉ trong vài giây, tối ưu cho thiết bị di động.
Đặc điểm chính
- Nhập màu (text‑input) – hỗ trợ hex, rgb, rgba.
- Chỉnh góc gradient (0‑360°).
- Copy mã CSS nhanh chóng.
- Tải file CSS về.
Các bước cơ bản
- Nhập màu đầu và màu cuối vào ô màu.
- Điều chỉnh góc bằng thanh trượt hoặc nhập giá trị.
- Xem trước gradient ngay trên màn hình.
- Nhấn Copy để sao chép mã CSS.
- Nếu cần, nhấn Download để tải file .css.
Ví dụ ngắn
background: linear-gradient(45deg, #ff7e5f, #feb47b);
Ghi chú quan trọng
- Gradient hỗ trợ hầu hết trình duyệt hiện đại.
- Đảm bảo màu nhập đúng định dạng (ví dụ: #ff7e5f).
- Sử dụng
linear-gradientcho góc,radial-gradientnếu muốn hiệu ứng vòng tròn (không có trong công cụ hiện tại).
Câu hỏi thường gặp
Công cụ hỗ trợ bao nhiêu màu trong một gradient?
Hiện tại chỉ hỗ trợ hai màu: màu bắt đầu và màu kết thúc.
Có thể chỉnh độ mờ (opacity) cho màu không?
Có, nhập màu dưới dạng rgba (ví dụ: rgba(255,126,95,0.8)).
Mã CSS được sao chép có định dạng gì?
Mã được sao chép ở dạng background: linear-gradient(...); sẵn sàng dùng trong stylesheet.
Có thể tải gradient dưới dạng hình ảnh không?
Công cụ hiện không hỗ trợ xuất ảnh, chỉ cho phép tải file CSS.
Mẹo thực hành: hãy bắt đầu với một dữ liệu mẫu nhỏ, kiểm tra kỹ kết quả đầu ra rồi mới áp dụng cho nội dung chính. Nếu kết quả chưa đúng ý, hãy thay đổi từng thông số một và thử lại. Cách làm này giúp bạn nhận ra nguyên nhân nhanh hơn, hạn chế sai sót và tránh phải lặp lại toàn bộ quy trình.