Trình Tạo Gradient CSS

Gradient tuyến tính chuyển đổi màu dọc theo một đường thẳng ở một góc được chỉ định. Ví dụ, gradient tuyến tính 90° chảy từ trái sang phải, trong khi 180° chảy từ trên xuống dưới.

Gradient xuyên tâm chuyển đổi màu hướng ra ngoài từ một điểm trung tâm dưới dạng hình tròn hoặc hình elip. Màu đầu tiên xuất hiện ở trung tâm và chuyển đổi thành các màu bên ngoài khi nó bức xạ ra ngoài.

Gradient hình nón chuyển đổi màu trong một chuyển động quét xoay quanh một điểm trung tâm, tương tự như một biểu đồ hình tròn hoặc bánh xe màu. Các màu xoay theo chiều kim đồng hồ bắt đầu từ góc được chỉ định.

Có hai cách để thêm điểm màu:

• Nhấp vào thanh gradient - Nhấp vào bất kỳ vị trí nào trên thanh xem trước gradient để thêm một điểm màu mới tại vị trí đó. Điểm mới sẽ tự động chọn một màu hòa trộn mượt mà với các điểm xung quanh.
• Sử dụng nút "+" - Nhấp vào nút thêm trong danh sách điểm màu để thêm một điểm mới ở cuối gradient.

Bạn có thể thêm bao nhiêu điểm màu tùy ý để tạo các gradient đa màu phức tạp.

Bạn có thể xóa các điểm màu theo hai cách:

• Kéo ra khỏi thanh - Nhấp và kéo tay cầm điểm ra khỏi thanh gradient. Khi bạn thả, điểm sẽ bị xóa với hoạt ảnh mượt mà.
• Nút xóa - Nhấp vào nút xóa trong trình chỉnh sửa điểm hoặc danh sách điểm màu.

Có, bạn có thể tạo gradient với độ trong suốt bằng cách điều chỉnh độ mờ của các điểm màu riêng lẻ:

• Chọn một điểm màu trong trình chỉnh sửa
• Sử dụng thanh trượt độ mờ để giảm độ mờ từ 100% (hoàn toàn không trong suốt) xuống 0% (hoàn toàn trong suốt)
• Đầu ra CSS sẽ tự động sử dụng các giá trị màu RGBA cho các điểm có độ mờ dưới 100%

Mẫu bàn cờ trong bản xem trước hiển thị các khu vực trong suốt, giúp bạn dễ dàng hình dung cách gradient của bạn sẽ trông như thế nào trên các nền khác nhau.

Đối với gradient tuyến tính, góc xác định hướng của chuyển đổi màu. Góc được đo bằng độ từ 0° đến 360°:

• 0° - Từ dưới lên trên (hướng lên theo chiều dọc)
• 90° - Từ trái sang phải (ngang)
• 180° - Từ trên xuống dưới (hướng xuống theo chiều dọc)
• 270° - Từ phải sang trái (ngang ngược)

Bạn có thể đặt góc bằng ba phương pháp:

• Kéo nút - Nhấp và kéo nút góc tròn để kiểm soát trực quan
• Nhấp vào các mũi tên hướng - Sử dụng lưới 8 hướng cho các góc phổ biến (0°, 45°, 90°, 135°, 180°, 225°, 270°, 315°)
• Nhập một giá trị - Nhập giá trị góc chính xác trong trường đầu vào số

Có, công cụ tạo cú pháp gradient CSS tiêu chuẩn hoạt động trong tất cả các trình duyệt hiện đại bao gồm:

• Google Chrome (phiên bản 26+)
• Mozilla Firefox (phiên bản 16+)
• Safari (phiên bản 7+)
• Microsoft Edge (tất cả các phiên bản)
• Opera (phiên bản 12.1+)

Không cần tiền tố nhà cung cấp cho các phiên bản trình duyệt hiện tại. Đặc tả gradient CSS đã được tiêu chuẩn hóa và được hỗ trợ rộng rãi kể từ năm 2013.

Không, hoàn toàn không. Tất cả việc tạo gradient diễn ra hoàn toàn trong trình duyệt của bạn bằng JavaScript phía máy khách. Đây là ý nghĩa của nó đối với quyền riêng tư của bạn:

• Không giao tiếp máy chủ - Các thiết kế gradient của bạn không bao giờ rời khỏi thiết bị của bạn
• Không lưu trữ dữ liệu - Chúng tôi không lưu trữ, theo dõi hoặc phân tích các lựa chọn màu hoặc thiết kế của bạn
• Không có cookie - Không có công nghệ theo dõi nào được sử dụng trên công cụ này
• Không cần tài khoản - Sử dụng tất cả các tính năng ngay lập tức mà không cần đăng ký

Tất cả xử lý diễn ra cục bộ trên máy tính của bạn, đảm bảo quyền riêng tư hoàn toàn và hiệu suất tức thì.