ตัวสร้าง Gradient Text
สร้างข้อความไล่เฉดสีหลายสีสวยงามด้วย CSS background-clip เลือก linear, radial และ conic gradients, เลือก preset และคัดลอกโค้ด HTML และ CSS พร้อมใช้งานได้ทันที เครื่องมือออนไลน์ฟรี
Loading tool...
ตัวสร้าง Gradient Text คืออะไร?
Gradient Text Generator เป็นเครื่องมือออนไลน์ฟรีที่สร้างเอฟเฟกต์ข้อความไล่เฉดสี CSS โดยใช้เทคนิค background-clip: text คุณสามารถเติมข้อความใดๆ ด้วย gradient หลายสีที่ลื่นไหล — เหมาะสำหรับ headings, hero sections, ปุ่ม และ branding เลือกจาก preset หรือสร้างชุดสีของคุณเอง แล้วคัดลอก HTML และ CSS พร้อมวาง
ประโยชน์หลัก
- พรีวิวสดแบบเรียลไทม์ขณะพิมพ์และปรับแต่ง
- Gradient 3 ประเภทพร้อมปรับมุมได้
- โค้ดพร้อมคัดลอกรองรับ Safari
- ไม่ต้องใช้ซอฟต์แวร์ออกแบบ — ทำงานในเบราว์เซอร์ใดก็ได้
กรณีการใช้งาน
- •Heading หน้า hero ที่ดึงดูดสายตาบน landing page
- •ข้อความปุ่มและป้าย call-to-action แบรนด์
- •แบนเนอร์การตลาดและกราฟิกโปรโมชัน
- •Text overlay สำหรับโพสต์โซเชียลมีเดีย
วิธีใช้ตัวสร้าง Gradient Text
- ป้อนข้อความ: พิมพ์ข้อความที่ต้องการใส่ gradient ลงในช่องข้อความ พรีวิวจะอัปเดตแบบเรียลไทม์
- เลือก preset หรือสี: คลิก preset palette เพื่อดูลุคทันที หรือเพิ่มสีของคุณเองด้วย color picker ใช้ปุ่ม shuffle เพื่อสุ่มชุดสี
- ปรับประเภทและมุม: เลือกประเภท gradient แบบ linear, radial หรือ conic สำหรับ linear และ conic ลาก slider มุมเพื่อกำหนดทิศทาง
- คัดลอกโค้ด: คลิก "คัดลอก" บนบล็อกโค้ด CSS หรือ HTML เพื่อคัดลอก snippet พร้อมวางไปยังโปรเจกต์ของคุณ
คุณสมบัติหลัก
- Gradient 3 แบบ: linear, radial และ conic พร้อมปรับมุมได้
- Preset สำเร็จ 8 แบบ พร้อมปุ่ม shuffle สุ่มชุดสี
- รองรับสีได้สูงสุด 6 จุดพร้อม color picker แบบเรียลไทม์
- พรีวิวสดที่อัปเดตทันทีขณะพิมพ์หรือปรับแต่ง
- โค้ด HTML และ CSS พร้อมคัดลอก ใช้ background-clip: text
- ฝั่งไคลเอนต์ 100% — ข้อมูลไม่ออกจากเบราว์เซอร์