Công cụ tạo CSS Gradient

Viết linear-gradient(135deg, #2193b0 0%, #6dd5ed 100%) bằng tay rồi tải lại trang để xem là một vòng lặp chậm chạp. Công cụ này khép lại vòng lặp đó: chọn linear, radial hoặc conic, kéo thanh trượt góc, đặt từng điểm dừng màu bằng bộ chọn màu gốc và vị trí phần trăm — và bản xem trước toàn chiều rộng được vẽ lại sau mỗi thao tác, với dòng nền hoàn chỉnh luôn sẵn sàng để sao chép.

Ba kiểu gradient đáp ứng những công việc khác nhau. Linear gradient chuyển màu dọc theo một hướng và đảm nhận hầu hết các phần hero và nút; radial gradient toả ra từ tâm cho hiệu ứng phát sáng và viền mờ; conic gradient quét quanh tâm và là nền tảng cho biểu đồ tròn và bánh xe màu sắc. Bạn có thể chuyển đổi kiểu bất kỳ lúc nào — các điểm dừng được giữ nguyên, vì vậy việc so sánh ba kiểu chỉ mất vài giây.

Tối đa sáu điểm dừng màu cho bạn không gian cho các thiết kế nhiều dải, và các trang mẫu cung cấp sẵn những tổ hợp đã được kiểm chứng — một hoàng hôn ấm áp, một đại dương tĩnh lặng và một cặp pastel nhẹ nhàng — như những điểm khởi đầu bạn có thể tinh chỉnh thay vì trang trắng. Lưu ý về sự phân công: công cụ tạo bảng màu trên trang này chọn các màu phẳng hài hoà và công cụ chuyển đổi định dạng màu chuyển đổi giá trị giữa HEX, RGB và HSL, trong khi công cụ này đảm nhận một nhiệm vụ khác — biến các màu đã chọn thành mã gradient CSS sẵn sàng.

Mọi thứ chạy cục bộ trong trình duyệt của bạn: không tải lên, không tài khoản, không vòng lặp máy chủ, và công cụ vẫn hoạt động ngoại tuyến sau khi đã tải.