เครื่องมือสร้าง Gradient

สร้างการไล่โทนสีแบบ Linear, Radial หรือ Conic เพิ่มจุดสีและกำหนดทิศทาง จากนั้นคัดลอก CSS ได้ในคลิกเดียว

ประเภท Gradient
จุดสี (Color stops)
CSS
ปรับแต่งจุดสีและทิศทางเพื่อสร้างการไล่โทนสีของคุณ

การไล่โทนสีทั้งหมดจะถูกเรนเดอร์ในเบราว์เซอร์ของคุณโดยตรง ไม่มีการอัปโหลดข้อมูลที่คุณตั้งค่าไว้ไปยัง BroBroGo

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

Linear, Radial และ Conic gradient แตกต่างกันอย่างไร?

Linear gradient จะผสมผสานสีตามแนวเส้นตรงที่คุณกำหนดทิศทางด้วยมุม Radial gradient จะแผ่กระจายสีออกจากจุดศูนย์กลางในรูปแบบวงกลมหรือวงรี ส่วน Conic gradient จะกวาดสีรอบจุดศูนย์กลางคล้ายกับวงล้อสี

จุดสี (Color stops) คืออะไร?

จุดสี (Color stop) แต่ละจุดคือสีที่ถูกปักหมุดไว้ ณ ตำแหน่งเฉพาะตามแนวการไล่โทนสี โดยเริ่มจาก 0% ที่จุดเริ่มต้น ไปจนถึง 100% ที่จุดสิ้นสุด คุณสามารถเลื่อนจุดสีเพื่อเปลี่ยนตำแหน่งที่สีนั้นแสดงผลเด่นชัดที่สุด หรือเพิ่มจุดสีเพิ่มเติมเพื่อการผสมผสานสีที่หลากหลายยิ่งขึ้น โดยสามารถใช้ได้สูงสุดแปดจุด

จะควบคุมทิศทางการไล่โทนสีได้อย่างไร?

สำหรับไล่โทนสีแบบ Linear หรือ Conic แถบเลื่อนมุมจะกำหนดทิศทาง โดย 0° จะชี้ขึ้นด้านบน และ 90° จะชี้ไปทางขวา ส่วนการไล่โทนสีแบบ Radial จะไม่มีมุม ให้เลือกรูปทรงวงกลม (Circle) หรือวงรี (Ellipse) แทนเพื่อเปลี่ยนลักษณะการแผ่กระจายของสี