Tạo gradient
Tạo CSS linear-gradient với xem trước trực tiếp.
Xem trực tiếp
Góc: 135°
CSS đầu ra
linear-gradient(135deg, #6366F1, #22D3EE)
background: linear-gradient(135deg, #6366F1, #22D3EE);
Xem gradient
background: linear-gradient(135deg, #6366F1, #22D3EE);
linear-gradient(135deg, #6366F1, #22D3EE)
Vì sao dùng bộ tạo gradient?
Linear-gradient hai stop là nền CSS thường cho hero, nút hoặc token sẽ dán vào stylesheet. Kéo góc, đảo stop, sao chép hàm hoặc khai báo background. Đây không phải editor mesh, conic hay radial — hai stop sRGB và một góc để thấy tương phản trước khi dán.
Gradient phổ biến
Dữ liệu của bạn được giữ riêng tư
CSS gradient được tạo trên trình duyệt. Không tải lên hoặc lưu trên máy chủ.
Về tạo CSS linear-gradient
Gradient Generator xem trước linear-gradient từ hai màu và một góc. Preview là hộp DOM; đầu ra là chuỗi gradient copy-paste. Chạy cục bộ. Dùng cho nền hero, nút và token sẽ dán vào stylesheet — không phải mesh Photoshop hay conic/radial trong panel này.
Góc là độ theo nghĩa linear-gradient. Chỉ hai stop: không phải editor nhiều stop. Nếu cần thêm stop, sao chép chuỗi hai stop và tự mở rộng. Màu là sRGB. Color Picker nếu muốn HEX trước; CSS Formatter nếu muốn rule xung quanh được in đẹp.
Shadow và border là công cụ riêng. Không tải lên.
Cách tạo gradient
Chọn hai màu
Đặt stop đầu và cuối. Preview cập nhật trong panel.
Đặt góc
Độ xoay linear-gradient. 180 thường là trên xuống dưới.
Sao chép CSS
Dán vào background-image hoặc custom property.
Giữ cục bộ
Đóng tab để bỏ bản nháp. Color Picker giúp nếu chỉ cần một hex.
Công cụ liên quan
Chọn màu
Chọn màu và sao chép HEX, RGB, HSL.
Chọn màu từ ảnh
Mở ảnh, di chuột để phóng pixel, sao chép HEX, RGB và HSL. Không tải lên.
Tạo box-shadow
Chỉnh box-shadow và sao chép CSS.
Tạo viền CSS
Xem trước độ dày, kiểu, bo góc, màu viền rồi sao chép CSS.
Chuyển màu
Chuyển màu giữa HEX, RGB và HSL. Gõ hoặc dán bên dưới — cả ba định dạng cập nhật khi bạn gõ.
Hỏi đáp Tạo gradient
Hai trong panel này. Sao chép linear-gradient và tự thêm stop. Góc là độ CSS. Conic và radial ngoài phạm vi.
Không. Hộp là DOM cục bộ. Sao chép CSS vào stylesheet.
Sao chép hàm gradient. Tự bọc background-image. CSS Formatter in đẹp rule xung quanh.