ตัวสร้าง CSS Gradient ออนไลน์ฟรี

เลือกสี

เลือกสีแรกและสีที่สองของคุณโดยใช้ตัวเลือกสี หรือป้อนรหัสสี Hex ได้โดยตรงในช่องข้อความ

เลือกประเภท Gradient

เลือกระหว่าง Linear Gradient สำหรับการเปลี่ยนสีแบบมีทิศทาง หรือ Radial Gradient สำหรับการเปลี่ยนสีแบบวงกลมจากกึ่งกลางออกไปด้านนอก

กำหนดทิศทาง

สำหรับการไล่ระดับแบบ Linear ให้เลือกจาก 8 ทิศทาง รวมถึง ขวา ซ้าย บน ล่าง และแนวทแยง โดยใช้ปุ่มลูกศร

คัดลอกโค้ด CSS

คลิกปุ่ม 'คัดลอก CSS' เพื่อคัดลอกคุณสมบัติ CSS background ทั้งหมดไปยังคลิปบอร์ดของคุณ พร้อมสำหรับวางลงในไฟล์สไตล์ชีทของคุณ

การไล่ระดับแบบ Linear และ Radial

สร้างการไล่ระดับสีทั้งแบบ Linear และ Radial ด้วยการควบคุมการเลือกสีและทิศทางการไล่ระดับได้อย่างเต็มที่ สลับไปมาระหว่างประเภท Gradient ได้ทันที

ควบคุมทิศทางได้ 8 แบบ

เลือกได้ 8 ทิศทางที่แตกต่างกันสำหรับการไล่ระดับแบบ Linear รวมถึงแนวตั้ง แนวนอน และแนวทแยง ด้วยการควบคุมด้วยลูกศรที่ใช้งานง่าย

สร้างสีแบบสุ่ม

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

คัดลอก CSS ได้ทันที

คัดลอกโค้ด CSS Gradient ที่สร้างขึ้นไปยังคลิปบอร์ดของคุณด้วยการคลิกเพียงครั้งเดียว คุณสมบัติ CSS background ที่พร้อมใช้งานสำหรับการนำไปใช้ได้ทันที

แสดงตัวอย่างแบบเรียลไทม์

ดูการเปลี่ยนแปลง Gradient ของคุณได้ทันทีด้วยพื้นที่แสดงตัวอย่างขนาดใหญ่ที่แสดงให้เห็นว่า Gradient ของคุณจะมีลักษณะอย่างไรในโปรเจกต์เว็บของคุณ

ผลลัพธ์ CSS ที่สมบูรณ์แบบ

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

การควบคุมทิศทางที่ใช้งานง่าย

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

แรงบันดาลใจในการสร้างสรรค์

เครื่องมือสร้างสีแบบสุ่มช่วยให้ค้นพบชุดสีใหม่ๆ และเป็นแรงบันดาลใจในการสร้างสรรค์สำหรับการออกแบบ Gradient และชุดสีของคุณ