เครื่องมือสร้างเกรเดียนต์

เกรเดียนต์สีคืออะไร?

เกรเดียนต์ (gradient) คือการไล่สีอย่างนุ่มนวลระหว่างสองสีขึ้นไป ในงานออกแบบเว็บมักใช้เกรเดียนต์กับพื้นหลัง ปุ่ม และส่วนหัว ช่วยเพิ่มมิติและลุคทันสมัยด้วยโค้ดเพียงไม่กี่บรรทัด

เกรเดียนต์แบบเส้นตรงหรือแบบวงกลม?

เกรเดียนต์แบบเส้นตรงเปลี่ยนสีไปตามแนวเส้นตรง โดยกำหนดทิศทางด้วยมุม (0° ชี้ขึ้น 90° ชี้ไปทางขวา) ส่วนเกรเดียนต์แบบวงกลมเริ่มจากจุดกึ่งกลางแล้วแผ่ออกเป็นวง เครื่องมือนี้สร้างได้ทั้งสองแบบและให้โค้ด CSS ที่ตรงกัน (linear-gradient หรือ radial-gradient).

วิธีใช้ใน CSS

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

เกรเดียนต์แบบตาข่าย (mesh gradient)

โหมด Mesh ผสมหลายสีเป็นแต้มสีนุ่ม ๆ ทั่วทั้งภาพ เหมือนพื้นหลังของแอปสมัยใหม่ แตะ “สุ่ม” เพื่อย้ายตำแหน่งสี คัดลอก CSS หรือดาวน์โหลดภาพหรือวอลล์เปเปอร์สำหรับโทรศัพท์