✨ ตัวสร้างเกรเดียนต์
background: linear-gradient(to right, #ff6b6b, #6bc1ff);
สร้างการไล่ระดับสี CSS แบบ Linear และ Radial ที่น่าทึ่งด้วยเครื่องมือสร้าง Gradient ที่ใช้งานง่ายของเรา เลือกสี กำหนดทิศทาง และคัดลอกโค้ด CSS ได้ทันทีสำหรับโปรเจกต์เว็บของคุณ
ตรวจสอบอัตราส่วนความต่างสีเพื่อให้สอดคล้องกับการเข้าถึงเว็บไซต์ ทดสอบการผสมผสานสีข้อความและพื้นหลังตามหลักเกณฑ์ WCAG พร้อมการแสดงตัวอย่างแบบเรียลไทม์ การให้คะแนนการเข้าถึง และคำแนะนำในการปรับปรุง
แปลงสี HSV (Hue, Saturation, Value) ให้เป็นสี Pantone ที่ใกล้เคียงที่สุดได้ทันที ค้นหาสี Pantone ที่สมบูรณ์แบบด้วยเครื่องมือจับคู่สีที่ครอบคลุมของเรา ซึ่งมีการเปรียบเทียบด้วยภาพและวิทยาศาสตร์สีที่แม่นยำ
แปลงสี RGB ให้เป็นสี Pantone ที่ใกล้เคียงที่สุดด้วยอัลกอริทึมจับคู่สีขั้นสูงของเรา เลือกดูสี Pantone ที่คัดสรรมาอย่างดี เปรียบเทียบความแตกต่างของสี และรับรหัสสีที่แม่นยำสำหรับโครงการออกแบบของคุณ
ดึงสีจากรูปภาพใดๆ ทางออนไลน์ได้ฟรี อัปโหลดรูปภาพ คลิกเพื่อเลือกสี และรับค่า HEX, RGB, HSL และ CMYK สร้างและส่งออกจานสีได้
สร้างสรรค์ภาพคอลลาจที่น่าทึ่งด้วยการรวมรูปภาพของคุณเข้ากับชุดสีที่สกัดออกมา อัปโหลดรูปภาพใดก็ได้เพื่อสกัดสีหลักโดยอัตโนมัติ และสร้างผลงานที่สวยงามด้วยการจัดวาง สไตล์ และอัตราส่วนภาพที่ปรับแต่งได้
สร้างจานสีที่สวยงามทางออนไลน์ด้วยเครื่องมือสร้างจานสีฟรีของเรา สร้างโทนสีที่กลมกลืนโดยใช้หลักการทฤษฎีสี หรือดึงสีจากรูปภาพ ส่งออกเป็นรูปแบบ CSS, SCSS, Tailwind, JSON, PDF และ PNG
เลือกสีแรกและสีที่สองของคุณโดยใช้ตัวเลือกสี หรือป้อนรหัสสี Hex ได้โดยตรงในช่องข้อความ
เลือกระหว่าง Linear Gradient สำหรับการเปลี่ยนสีแบบมีทิศทาง หรือ Radial Gradient สำหรับการเปลี่ยนสีแบบวงกลมจากกึ่งกลางออกไปด้านนอก
สำหรับการไล่ระดับแบบ Linear ให้เลือกจาก 8 ทิศทาง รวมถึง ขวา ซ้าย บน ล่าง และแนวทแยง โดยใช้ปุ่มลูกศร
คลิกปุ่ม 'คัดลอก CSS' เพื่อคัดลอกคุณสมบัติ CSS background ทั้งหมดไปยังคลิปบอร์ดของคุณ พร้อมสำหรับวางลงในไฟล์สไตล์ชีทของคุณ
สร้างการไล่ระดับสีทั้งแบบ Linear และ Radial ด้วยการควบคุมการเลือกสีและทิศทางการไล่ระดับได้อย่างเต็มที่ สลับไปมาระหว่างประเภท Gradient ได้ทันที
เลือกได้ 8 ทิศทางที่แตกต่างกันสำหรับการไล่ระดับแบบ Linear รวมถึงแนวตั้ง แนวนอน และแนวทแยง ด้วยการควบคุมด้วยลูกศรที่ใช้งานง่าย
สร้างชุดสีแบบสุ่มได้ทันทีเพื่อค้นพบแนวคิด Gradient ใหม่ๆ และชุดสีที่สร้างสรรค์สำหรับโปรเจกต์ของคุณ
คัดลอกโค้ด CSS Gradient ที่สร้างขึ้นไปยังคลิปบอร์ดของคุณด้วยการคลิกเพียงครั้งเดียว คุณสมบัติ CSS background ที่พร้อมใช้งานสำหรับการนำไปใช้ได้ทันที
CSS Gradient Generator คือเครื่องมือที่สร้างการไล่ระดับสีพื้นหลัง CSS โดยการรวมสีสองสีขึ้นไปเข้าด้วยกันอย่างราบรื่น เครื่องมือสร้าง Gradient ของเราสร้างคุณสมบัติ CSS linear-gradient และ radial-gradient ที่สามารถนำไปใช้ในการพัฒนาเว็บได้โดยตรง การไล่ระดับแบบ Linear จะสร้างการเปลี่ยนสีแบบมีทิศทาง ในขณะที่การไล่ระดับแบบ Radial จะสร้างการเปลี่ยนสีแบบวงกลมจากจุดศูนย์กลาง เครื่องมือนี้มีการแสดงตัวอย่างแบบเรียลไทม์และสร้างโค้ด CSS ที่เข้ากันได้กับเบราว์เซอร์สำหรับมาตรฐานเว็บสมัยใหม่
ดูการเปลี่ยนแปลง Gradient ของคุณได้ทันทีด้วยพื้นที่แสดงตัวอย่างขนาดใหญ่ที่แสดงให้เห็นว่า Gradient ของคุณจะมีลักษณะอย่างไรในโปรเจกต์เว็บของคุณ
โค้ด CSS ที่สร้างขึ้นได้รับการปรับให้เหมาะสมและพร้อมใช้งานด้วยไวยากรณ์ที่ถูกต้องสำหรับคุณสมบัติ background เข้ากันได้กับเบราว์เซอร์ที่ทันสมัยทั้งหมด
ปุ่มลูกศรที่ใช้งานง่ายสำหรับการกำหนดทิศทางการไล่ระดับสี ทำให้การสร้างทิศทางที่คุณต้องการสำหรับการออกแบบของคุณเป็นเรื่องง่าย
เครื่องมือสร้างสีแบบสุ่มช่วยให้ค้นพบชุดสีใหม่ๆ และเป็นแรงบันดาลใจในการสร้างสรรค์สำหรับการออกแบบ Gradient และชุดสีของคุณ
Linear Gradient สร้างการเปลี่ยนสีในทิศทางเส้นตรง (แนวนอน, แนวตั้ง หรือแนวทแยง) ในขณะที่ Radial Gradient สร้างการเปลี่ยนสีแบบวงกลมที่แผ่ออกไปจากจุดศูนย์กลาง
ได้ คุณสามารถป้อนรหัสสี Hex ที่ถูกต้องได้โดยตรงในช่องข้อความถัดจากตัวเลือกสี เครื่องมือนี้รองรับรหัส Hex 6 หลัก เช่น #ff6b6b หรือ #6bc1ff
คัดลอกโค้ด CSS แล้ววางลงในสไตล์ชีทของคุณ โค้ดที่สร้างขึ้นคือคุณสมบัติ background ที่สมบูรณ์ ซึ่งคุณสามารถนำไปใช้กับองค์ประกอบ HTML ใดๆ เพื่อแสดง Gradient
ได้ CSS ที่สร้างขึ้นใช้ไวยากรณ์ linear-gradient และ radial-gradient มาตรฐานที่รองรับโดยเบราว์เซอร์ที่ทันสมัยทั้งหมด รวมถึง Chrome, Firefox, Safari และ Edge
ปัจจุบัน เครื่องมือของเราเน้นการสร้าง Gradient สองสีเพื่อความเรียบง่ายและการออกแบบที่สะอาดตา คุณสามารถแก้ไขโค้ด CSS ที่สร้างขึ้นเพื่อเพิ่มจุดหยุดสีเพิ่มเติมได้หากจำเป็น