เครื่องมือสร้าง CSS Gradient
สร้าง CSS gradient แบบมองเห็นภาพ: เลือกประเภท linear, radial หรือ conic พร้อมแถบเลื่อนปรับมุม และเพิ่มจุดสีได้สูงสุดหกจุด พร้อมตัวอย่างสดแบบเต็มความกว้างและโค้ดที่พร้อมคัดลอก
🔒 ประมวลผลทั้งหมดในเบราว์เซอร์ของคุณ — ไม่มีการอัปโหลดสิ่งใดที่คุณป้อนที่นี่
ผลลัพธ์
การเขียน linear-gradient(135deg, #2193b0 0%, #6dd5ed 100%) ด้วยมือแล้วรีโหลดหน้าดูผลลัพธ์เป็นวงจรที่เชื่องช้า เครื่องมือนี้ปิดวงจรนั้น: เลือก linear, radial หรือ conic, ลากแถบเลื่อนปรับมุม, ตั้งค่าจุดสีแต่ละจุดด้วยตัวเลือกสีและตำแหน่งเปอร์เซ็นต์ — แล้วตัวอย่างเต็มความกว้างจะแสดงผลทันทีทุกครั้งที่คุณป้อนข้อมูล พร้อมโค้ดพื้นหลังที่เสร็จสมบูรณ์และพร้อมคัดลอกเสมอ
การไล่สีสามประเภทนี้ทำหน้าที่ต่างกัน Linear gradients เฟดไปตามทิศทางและใช้กับส่วนฮีโร่และปุ่มเป็นส่วนใหญ่; radial gradients กระจายจากศูนย์กลางสำหรับเอฟเฟกต์เรืองแสงและขอบมืด; conic gradients ไล่วนรอบศูนย์กลางและขับเคลื่อนแผนภูมิวงกลมและวงล้อสี คุณสามารถสลับประเภทได้ทุกเมื่อ — จุดสีของคุณจะถูกยกไปด้วย ทำให้การเปรียบเทียบทั้งสามแบบใช้เวลาเพียงไม่กี่วินาที
จุดสีสูงสุดหกจุดให้พื้นที่สำหรับการออกแบบลายแถบหลากสี และหน้าพรีเซตมาพร้อมชุดสีที่ลงตัว — sunset อบอุ่น, ocean สงบ และ pastel นุ่มนวล — เป็นจุดเริ่มต้นที่คุณปรับแต่งได้แทนที่จะเป็นผืนผ้าใบว่างเปล่า หมายเหตุเรื่องการแบ่งหน้าที่: เครื่องมือสร้างพาเลตสีในเว็บนี้ช่วยเลือกสีพื้นเรียบที่เข้ากัน และเครื่องมือแปลงรูปแบบสีช่วยแปลงค่าระหว่าง HEX, RGB และ HSL ในขณะที่เครื่องมือนี้ทำหน้าที่ต่างออกไป — มันเปลี่ยนสีที่เลือกไว้ให้เป็นโค้ด CSS gradient สำเร็จรูป
ทุกอย่างทำงานภายในเบราว์เซอร์ของคุณ: ไม่ต้องอัปโหลด, ไม่ต้องมีบัญชี, ไม่มีการส่งข้อมูลกลับไปกลับมาที่เซิร์ฟเวอร์, และเครื่องมือยังทำงานแบบออฟไลน์ได้เมื่อโหลดครั้งแรกแล้ว