Tạo gradient CSS tuyệt đẹp với trình chỉnh sửa trực quan. Gradient tuyến tính, xuyên tâm và hình nón. Xuất ra CSS, Tailwind. Công cụ miễn phí.
linear-gradient(135deg, #6366F1 0%, #EC4899 100%)Randomize will generate 2-4 color stops
Randomize will generate 2-4 color stops
Learn how to apply CSS gradients in real-world design scenarios
Hero sections, landing pages, and app backgrounds
Perfect for hero sections, landing pages, and full-screen app backgrounds. Creates visual depth and modern aesthetic.
background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);Call-to-action buttons with eye-catching gradients
Gradient buttons attract attention and improve click-through rates. Ideal for CTAs, sign-up buttons, and primary actions.
background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);Eye-catching gradient text for headlines
Gradient text makes headlines pop. Works great for hero titles, feature names, and brand statements.
background-image: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;Subtle gradients for cards and UI surfaces
Subtle gradient background
Subtle gradients add depth to cards without overwhelming. Perfect for feature cards, testimonials, and pricing tables.
background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(236, 72, 153, 0.1) 100%);Gradient borders for modern UI elements
Stand out with colorful borders
Gradient borders make elements stand out. Great for input fields, cards, and featured content sections.
.gradient-border {
background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);
padding: 2px;
border-radius: 12px;
}
.gradient-border > div {
background: var(--bg-surface);
border-radius: 10px;
}Powerful features designed for designers and developers
Tạo gradient tuyến tính, xuyên tâm và hình nón với đầy đủ kiểm soát hướng, vị trí.
Thêm, xóa và kéo điểm màu trên thanh trực quan. Xem thay đổi theo thời gian thực.
Sao chép mã CSS sạch, tương thích đa trình duyệt. Bao gồm màu fallback.
Xuất gradient dạng class Tailwind CSS hoặc config để tích hợp liền mạch.
Duyệt các gradient đẹp có sẵn. Một click để sử dụng làm điểm bắt đầu.
Tải gradient dạng PNG hoặc SVG để dùng trong công cụ thiết kế hoặc in ấn.
Get started in just a few simple steps
Chọn gradient tuyến tính, xuyên tâm hoặc hình nón. Mỗi loại có hiệu ứng khác nhau.
Nhấn vào thanh gradient để thêm điểm màu. Kéo để điều chỉnh vị trí.
Với gradient tuyến tính, đặt góc. Với xuyên tâm, chọn tâm và hình dạng.
Nhấn điểm màu để chọn màu chính xác. Điều chỉnh độ trong suốt.
Sao chép mã CSS, xuất Tailwind config, hoặc tải xuống dạng hình ảnh.
Everything you need to know
Bạn có thể tạo gradient tuyến tính, xuyên tâm và hình nón. Mỗi loại tạo hiệu ứng chuyển màu khác nhau.
Nhấn vào bất kỳ đâu trên thanh gradient để thêm điểm màu mới. Kéo các điểm để điều chỉnh vị trí.
Có! Bạn có thể tải gradient dạng PNG hoặc SVG. Hữu ích cho công cụ thiết kế hoặc thuyết trình.
Có, CSS được tạo bao gồm vendor prefixes và màu fallback cho tương thích tối đa.
Có! Tạo tài khoản miễn phí để lưu không giới hạn gradient vào workspace.
Nhấn vào điểm màu và điều chỉnh thanh opacity. Tạo gradient từ màu đặc sang trong suốt.
Explore more color tools
Tạo Gradient CSS - Công Cụ Thiết Kế Chuyển Màu - Free, no signup required
Khởi Động Công Cụ