สร้างการไล่ระดับสีที่สวยงาม

วิธีสร้าง CSS Gradient

1. 1

   เลือกสี

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

2. 2

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

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

3. 3

   กำหนดทิศทาง

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

4. 4

   คัดลอกโค้ด CSS

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

คุณสมบัติหลัก

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

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

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

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

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

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

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

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

CSS Gradient Generator คืออะไร?

CSS Gradient Generator คือเครื่องมือที่สร้างการไล่ระดับสีพื้นหลัง CSS โดยการรวมสีสองสีขึ้นไปเข้าด้วยกันอย่างราบรื่น เครื่องมือสร้าง Gradient ของเราสร้างคุณสมบัติ CSS linear-gradient และ radial-gradient ที่สามารถนำไปใช้ในการพัฒนาเว็บได้โดยตรง การไล่ระดับแบบ Linear จะสร้างการเปลี่ยนสีแบบมีทิศทาง ในขณะที่การไล่ระดับแบบ Radial จะสร้างการเปลี่ยนสีแบบวงกลมจากจุดศูนย์กลาง เครื่องมือนี้มีการแสดงตัวอย่างแบบเรียลไทม์และสร้างโค้ด CSS ที่เข้ากันได้กับเบราว์เซอร์สำหรับมาตรฐานเว็บสมัยใหม่

ทำไมถึงควรใช้เครื่องมือสร้าง Gradient ของเรา?

• 1

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

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

• 2

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

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

• 3

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

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

• 4

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

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

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