รองรับประเภทการไล่ระดับสีใดบ้าง?

เชิงเส้น รัศมี และรูปกรวย — ทั้งสามประเภทการไล่ระดับสีของ CSS

ฉันสามารถเพิ่มจุดหยุดสีได้หรือไม่?

ใช่ — เพิ่มจุดหยุดสีได้มากเท่าที่คุณต้องการด้วยตำแหน่งที่กำหนดเองสำหรับการควบคุมอย่างละเอียด

ใช่ — สลับเพื่อรับคลาสยูทิลิตี้ Tailwind (เช่น bg-gradient-to-r from-blue-500 to-purple-600)

ใช่ — ฟรีทั้งหมด ไม่ต้องลงทะเบียน ทำงานในเบราว์เซอร์ของคุณ

สีและการออกแบบ

ตัวสร้าง CSS gradient ฟรี สร้าง gradient แบบ linear, radial และ conic ด้วยภาพ คัดลอก CSS หรือคลาส Tailwind ได้ทันที แสดงตัวอย่างสดขณะปรับแต่ง

Runs in your browser

FromToType

Angle135°

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

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

หมายเหตุจากบรรณาธิการ

บทเชิงลึกนี้มีให้บริการเฉพาะภาษาอังกฤษในขณะนี้ เครื่องมือแปลงด้านบนทำงานในภาษาของคุณ บทความอธิบายแบบยาวยังไม่ได้แปล

คำถามที่พบบ่อย

›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.

Use with

เครื่องมือที่เกี่ยวข้อง