Màu sắc & Thiết kế
Trình tạo Gradient
Trình tạo gradient CSS miễn phí. Xây dựng gradient tuyến tính, xuyên tâm và hình nón một cách trực quan. Sao chép CSS hoặc các lớp Tailwind ngay lập tức. Xem trước trực tiếp khi bạn điều chỉnh.
Runs in your browser
Gradient generator
CSS
background: linear-gradient(135deg, #3b82f6, #a855f7);css
Tailwind (approx)
bg-gradient-to-br from-[#3b82f6] to-[#a855f7]css
Ghi chú của biên tập viên
Understanding · Two colours and a path between them.
Chương phân tích chuyên sâu này hiện chỉ có sẵn bằng tiếng Anh. Công cụ chuyển đổi ở trên hoạt động bằng ngôn ngữ của bạn; bài viết giải thích dài chưa được dịch.
Các câu hỏi thường gặp
Quick answers.
›What gradient types are supported?
Linear, radial and conic — all three CSS gradient types.
›Can I add color stops?
Yes — add as many color stops as you need with custom positions for fine-grained control.
›Does it output Tailwind?
Yes — toggle to get Tailwind utility classes (e.g. bg-gradient-to-r from-blue-500 to-purple-600).
›Is the generator free?
Yes — fully free, no signup, runs in your browser.
Mọi người cũng tìm kiếm
Use with
What people reach for next.
Công cụ liên quan
More in this room.
- Trình tạo Box ShadowTrình chỉnh sửa box-shadow CSS trực quan.
- Trình tạo Border RadiusTrình chỉnh sửa border-radius CSS từng góc.
- Trình chỉnh sửa Cubic BezierThiết kế các đường cong easing CSS trực quan.
- Trình tạo hoạt ảnh CSSTạo khung hình chính trực quan, sao chép CSS sẵn sàng dán.
- Trình tạo bộ lọc CSSXem trước trực tiếp độ mờ, độ sáng, xoay màu và hơn thế nữa.
- Trình tạo GlassmorphismThẻ giao diện người dùng hiệu ứng kính mờ với backdrop-filter.