ตัวแก้ไขจุดหยุดสี Gradient
แก้ไข CSS gradient หลายจุดหยุดสีด้วยแถบเลื่อนตำแหน่งที่แม่นยำ จัดเรียงใหม่ รองรับ conic gradient และ repeating pattern ฟรีพร้อมดูตัวอย่างสดและคัดลอก CSS ได้
Loading tool...
ตัวแก้ไขจุดหยุดสี Gradient คืออะไร?
ตัวแก้ไขจุดหยุดสี Gradient เป็นเครื่องมือละเอียดสำหรับสร้าง CSS gradient หลายจุดหยุดสี รองรับ linear, radial และ conic gradient, รวมถึง repeating pattern และจุดหยุดสีสูงสุดสิบจุดที่วางตำแหน่งอิสระ พร้อมดูตัวอย่างสดและคัดลอก CSS ได้ทันที
ประโยชน์หลัก
- ควบคุมตำแหน่งของทุกจุดหยุดสีอย่างแม่นยำ แทนการเดา
- โหมด conic และ repeating gradient สำหรับการออกแบบที่สมจริงยิ่งขึ้น
- จัดเรียงและลบจุดได้ทันทีพร้อมดูตัวอย่างสด
- คัดลอก CSS ที่สะอาดไปใช้ใน stylesheet ใดก็ได้โดยไม่ต้อง build
กรณีการใช้งาน
- •พื้นหลังส่วน hero และหน้า landing ทางการตลาด
- •ขอบ ตัวแบ่ง และตัวบ่งชี้ความคืบหน้าแบบตกแต่ง
- •ตัวหมุน conic gradient กราฟ และงานตกแต่งสไตล์ pie
- •ลวดลาย repeating สำหรับ texture และพื้นหลังลายทาง
วิธีใช้ตัวแก้ไขจุดหยุดสี Gradient
- เลือกประเภท: เลือก linear, radial หรือ conic แล้วเปิดโหมด repeating หากต้องการลายการทำซ้ำ
- ตั้งค่าจุดหยุดสี: เพิ่มจุดสูงสุดสิบจุด เลือกสีแต่ละจุด แล้วลากแถบเลื่อนตำแหน่งระหว่าง 0 ถึง 100 เปอร์เซ็นต์
- ปรับแต่ง: จัดเรียงจุดใหม่ด้วยลูกศร ปรับมุมหรือรูปร่าง radial หรือโหลดพรีเซ็ตเป็นจุดเริ่มต้น
- คัดลอก CSS: ดูตัวอย่าง gradient แล้วกด Copy เพื่อคัดลอก CSS พร้อมวาง
คุณสมบัติหลัก
- รองรับโหมด linear, radial, conic และ repeating gradient
- จุดหยุดสีสูงสุดสิบจุดพร้อมแถบเลื่อนตำแหน่งอิสระ
- จัดเรียงหรือลบจุดได้คลิกเดียว
- พรีเซ็ต gradient พร้อมใช้หกแบบ
- ดูตัวอย่างสดและคัดลอก CSS ได้ทันที