Trình tạo Gradient CSS
Thiết kế gradient CSS tuyến tính và tỏa tròn với bản xem trước trực tiếp. Thêm điểm màu, đặt góc, rồi sao chép đoạn CSS nền gọn gàng — tất cả ngay trong trình duyệt của bạn.
Góc
90°
Điểm màu
#f5530c
%
#ffa94d
%
background: linear-gradient(90deg, #f5530c 0%, #ffa94d 100%);
Cách sử dụng Trình tạo Gradient CSS
- 1
Chọn kiểu gradient
Chuyển qua lại giữa Tuyến tính và Tỏa tròn. Với gradient tuyến tính, bạn còn có thể đặt hướng bằng thanh trượt góc, tính bằng độ.
- 2
Thêm và tô màu cho các điểm
Nhấp vào ô màu để chọn từng màu, rồi đặt vị trí của nó từ 0 đến 100 phần trăm. Dùng Thêm điểm màu để pha trộn nhiều màu, hoặc xóa bớt một điểm cho đơn giản.
- 3
Xem trước trực tiếp
Khung xem trước hiển thị gradient của bạn đúng như khi nó hiện ra trong trình duyệt, cập nhật theo từng thay đổi bạn thực hiện.
- 4
Sao chép đoạn CSS
Sao chép dòng background được tạo ra rồi dán vào stylesheet của bạn. Đó là CSS chuẩn, hoạt động trên mọi trình duyệt hiện đại.
Câu hỏi thường gặp
Làm thế nào để tạo một gradient CSS?
Sự khác biệt giữa gradient tuyến tính và gradient tỏa tròn là gì?
Điểm màu là gì?
Làm thế nào để dùng gradient trong dự án của tôi?
Dữ liệu của tôi có được tải lên máy chủ không?
Công cụ liên quan
Tiếp tục với những công cụ hữu ích này