Công cụ màu sắc

Tạo gradient CSS: linear, radial, conic – Miễn phí

Miễn phí, không cần đăng ký, chạy trên trình duyệt. Thiết kế gradient dạng linear, radial hoặc conic với tối đa 8 điểm màu, xem trực tiếp và sao chép mã CSS. Tải về dưới dạng ảnh nền PNG với các kích thước thông dụng.

Kiểu

Điểm dừng màu

CSS

background: #ff7ac6;
background: linear-gradient(135deg, #ff7ac6 0%, #ffe14d 100%);

Dòng đầu tiên là màu đặc dành cho các thiết bị rất cũ không hiển thị được gradient.

Bắt đầu từ mẫu có sẵn

Được tạo trên thiết bị của bạn.

Vì sao nên dùng Tạo gradient CSS

Miễn phí 100%
Dùng bao nhiêu lần tùy thích. Không cần đăng ký, không hình mờ, không cần cài đặt.
Riêng tư ngay từ thiết kế
Những gì bạn nhập chỉ nằm trong trình duyệt và không bao giờ được gửi cho chúng tôi.
Chạy trên mọi thiết bị
Chạy trên trình duyệt trên Windows, Mac, Linux, Android và iPhone. Không cần ứng dụng.

Cách dùng Tạo gradient CSS

  1. Chọn linear, radial hoặc conic, và đặt hướng.
  2. Chọn màu và kéo từng điểm màu vào vị trí.
  3. Sao chép mã CSS hoặc tải gradient về dưới dạng ảnh.

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

Làm sao để dùng mã CSS?
Dán vào quy tắc CSS của phần tử bạn muốn tô màu. Dòng đầu tiên là màu đơn dự phòng; dòng thứ hai là gradient.
Linear, radial và conic khác nhau thế nào?
Linear chuyển màu theo một đường thẳng, radial lan tỏa từ tâm ra, còn conic quét quanh tâm như bánh xe màu.
Tôi có thể dùng độ trong suốt không?
Có. Nhập màu như rgba(47, 91, 255, 0.5) vào một điểm màu.
Có gì bị tải lên không?
Không. Gradient được tạo ngay trên thiết bị của bạn.
Tạo gradient CSS có miễn phí không?
Có. Bạn dùng miễn phí, không cần đăng ký và không cần cài đặt gì.

Trợ giúp và hướng dẫn (bằng tiếng Anh)

Công cụ liên quan