🌈 เครื่องมือสร้างค่าความชัน CSS

เกี่ยวกับ

เครื่องมือนี้ช่วยให้คุณสร้างค่าความชัน CSS ได้ด้วยการใช้ภาพโดยไม่ต้องเขียนโค้ดเพียงบรรทัดเดียว เลือกระหว่าง linear-gradient และ radial-gradient ตั้งค่ามุมหรือรูปร่าง จัดการจุดสีด้วยตัวเลือกสีและแถบเลื่อนตำแหน่ง และดูผลลัพธ์แบบเรียลไทม์ ตัวอย่างที่ตั้งค่าไว้ 8 แบบ (อาทิ พระอาทิตย์ตก มหาสมุทร แสงเหนือ นีออน และอื่นๆ) ช่วยให้คุณเริ่มต้นได้เร็วขึ้น เนื่องจากทุกการทำงานดำเนินการภายในเบราว์เซอร์ของคุณโดยใช้ JavaScript บริสุทธิ์ ข้อมูลสีหรือข้อมูลการออกแบบใดๆ ก็ไม่เคยถูกส่งออกจากอุปกรณ์ของคุณ — ไม่มีเซิร์ฟเวอร์ ไม่มีบัญชี

วิธีใช้งาน

1. เลือกประเภทค่าความชัน — เส้นตรง (Linear) หรือรังสี (Radial) — จากเมนูแบบเลือก (dropdown) ประเภทค่าความชัน
2. สำหรับค่าความชันแบบเส้นตรง ตั้งค่ามุม (0–360°) โดยใช้แถบเลื่อนหรือช่องป้อนค่าตัวเลข สำหรับค่าความชันแบบรังสี เลือกรูปร่างเป็น Ellipse หรือ Circle
3. คลิกสีในแผง Color Stops เพื่อเปิดตัวเลือกสี จากนั้นลากตำแหน่งที่ป้อนเพื่อวางแต่ละจุดหยุดไว้ในตำแหน่งที่คุณต้องการอย่างแม่นยำ
4. คลิก + เพิ่มจุดสีเพื่อแทรกจุดสีใหม่ที่วางอัตโนมัติที่ช่องว่างที่ใหญ่ที่สุด หรือคลิกปุ่ม ✕ เพื่อลบจุดสีใดๆ (ต้องมีจุดสีอย่างน้อย 2 จุด)
5. คลิกที่ Copy CSS เพื่อคัดลอกการกำหนดค่าพื้นหลังที่เสร็จสมบูรณ์ เช่น linear-gradient(…) หรือ radial-gradient(…) ไปยังคลิปบอร์ด และวางลงในไฟล์ stylesheet ของคุณได้ทันที

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

เครื่องสร้าง CSS Gradient ใช้ฟรีได้ไหม

ใช่ ฟรีโดยสมบูรณ์ — ไม่มีการสมัครสมาชิก ไม่มีบัญชี และไม่มีข้อจำกัดการใช้งานที่ซ่อนไว้ ให้เปิดหน้าและเริ่มสร้างกราดิเอนต์ได้ทันที

เครื่องมือนี้ใช้งานได้โดยไม่ต้องเชื่อมต่ออินเทอร์เน็ตหรือใช้งานแบบออฟไลน์ได้หรือไม่?

ใช่ หลังจากหน้าเว็บโหลดเสร็จ เครื่องมือทั้งหมดจะทำงานแบบออฟไลน์โดยไม่มีการเรียกใช้ API ภายนอก ขึ้นอยู่กับ CDN หรือการร้องขอจากเซิร์ฟเวอร์ จึงปลอดภัยที่จะใช้งานบนเครื่องบินหรือในสภาพแวดล้อมที่มีข้อจำกัดด้านเครือข่าย

ข้อมูลสีหรือการออกแบบของฉันถูกส่งไปยังเซิร์ฟเวอร์หรือไม่?

ไม่ ทุกการสร้างค่าความชันและการแสดงตัวอย่างจะเกิดขึ้นในเบราว์เซอร์ของคุณโดยใช้ JavaScript ทางเลือกสีของคุณจะถูกบันทึกไว้เพียงใน localStorage ของเบราว์เซอร์เท่านั้น และจะไม่ถูกส่งออกไปที่ใดทั้งสิ้น

ความแตกต่างระหว่าง linear-gradient และ radial-gradient คืออะไร?

การใช้ linear-gradient จะเปลี่ยนสีตามเส้นตรงในมุมที่กำหนด (เช่น 135deg) ส่วน radial-gradient จะกระจายสีออกจากรูปวงรีหรือวงกลมจากจุดศูนย์กลาง ทั้งสองรูปแบบจะสร้าง CSS มาตรฐานที่ทำงานได้ในเบราว์เซอร์รุ่นใหม่ทั้งหมด

ฉันสามารถเพิ่มสีได้กี่สต็อป?

ไม่มีข้อจำกัดที่กำหนดไว้ล่วงหน้า — คุณสามารถเพิ่มสีสต็อปได้ตามที่คุณต้องการ (ขั้นต่ำ 2 สีสต็อป) สีสต็อปใหม่จะถูกวางไว้ที่ช่วงที่กว้างที่สุดในสเกลสี และสีที่ได้จากการคำนวณจะถูกเติมไว้ล่วงหน้าเพื่อให้เริ่มต้นได้อย่างราบรื่น

เครื่องมือนี้จะอัปโหลดข้อมูลของฉันหรือไม่?

ไม่ ทุกอย่างทำงานในเบราว์เซอร์ของคุณ ดังนั้นข้อมูลของคุณจึงไม่เคยออกจากอุปกรณ์ของคุณ — และหลังจากโหลดหน้าแล้วยังใช้งานแบบออฟไลน์ได้ด้วย