CSS Gradient Generator

Giới thiệu công cụ

Công cụ tạo CSS Gradient tạo ra các gradient nhiều màu mịn mà bạn có thể dán trực tiếp vào CSS. Hỗ trợ gradient tuyến tính (theo hướng) và hướng tâm (hình tròn) với bất kỳ số lượng điểm màu nào.

Điểm màu xác định vị trí bắt đầu và kết thúc của mỗi màu dọc theo trục gradient. Thanh trượt góc xoay gradient tuyến tính từ 0° đến 360°.

Cách sử dụng

1. Chọn loại gradient: Tuyến tính hoặc Hướng tâm.
2. Với gradient tuyến tính, kéo thanh trượt góc để đặt hướng.
3. Nhấp vào mẫu màu để thay đổi và kéo thanh trượt vị trí.
4. Nhấp + Thêm điểm để thêm điểm màu. Nhấp ✕ để xóa.
5. Nhấp Sao chép để sao chép khai báo CSS background.

Trường hợp sử dụng

Nhà thiết kế web tạo nền khu vực hero bằng gradient CSS thay vì hình ảnh. Nhóm thương hiệu tạo bảng màu gradient phù hợp hướng dẫn màu doanh nghiệp. Nhà phát triển tạo nguyên mẫu thẻ, nút và overlay với màu gradient.

Câu hỏi thường gặp

• Sự khác biệt giữa gradient tuyến tính và hướng tâm? — Gradient tuyến tính chuyển màu dọc theo đường thẳng theo góc nhất định. Gradient hướng tâm tỏa màu từ tâm ra ngoài.
• Có thể dùng nhiều hơn hai màu không? — Có. Nhấp + Thêm điểm để thêm bao nhiêu điểm màu tùy thích.
• CSS được tạo ra có tương thích đa trình duyệt không? — Có. Các hàm linear-gradient() và radial-gradient() được hỗ trợ đầy đủ trên tất cả trình duyệt hiện đại mà không cần tiền tố nhà cung cấp.