เครื่องกำเนิดการไล่ระดับสี CSS

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

ทุกอย่างทำงานในเบราว์เซอร์ของคุณตามสีและการตั้งค่าที่คุณเลือก ดังนั้นจึงไม่มีการอัปโหลดใดๆ และคุณสามารถคัดลอกผลลัพธ์และใช้งานแบบออฟไลน์ได้

การไล่ระดับสีเชิงเส้นจะผสมสีตามแนวเส้นตรง และมุมจะกำหนดทิศทาง: 0 องศาชี้ขึ้น 90 องศาชี้ไปทางขวา และ 180 องศาชี้ลง การไล่ระดับสีในแนวรัศมีจะผสมออกจากศูนย์กลาง เป็นรูปวงกลมหรือวงรี

ทั้งสองค่าเป็นค่า CSS มาตรฐาน ซึ่งเขียนเป็น linear-gradient() และ radial-gradient() และทั้งสองใช้รายการการหยุดสีเดียวกัน ดังนั้นการสลับประเภทจะคงสีของคุณและเปลี่ยนเฉพาะวิธีกระจายสีเท่านั้น

การหยุดสีแต่ละสีคือสีที่วางอยู่ที่ตำแหน่งตั้งแต่ 0% ถึง 100% การไล่ระดับสีจะผสมผสานกันอย่างราบรื่นระหว่างจุดหยุดข้างเคียง ดังนั้นตำแหน่งของจุดหยุดจะควบคุมว่าสีจะขึ้นสูงสุดที่ใดและจะจางลงไปยังจุดถัดไปได้เร็วเพียงใด

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

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

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