Skip to content

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 browserUpdated Apr 26, 2026

Gradient generator

CSS

background: linear-gradient(135deg, #3b82f6, #a855f7);
css

Tailwind (approx)

bg-gradient-to-br from-[#3b82f6] to-[#a855f7]
css

Các câu hỏi thường gặp

›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