วิธีสร้างเกรเดียนต์ CSS

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

ประเภทของเกรเดียนต์ CSS

เกรเดียนต์เชิงเส้น — สีเปลี่ยนเป็นเส้นตรง (บนลงล่าง ซ้ายไปขวา หรือมุมใดก็ได้)

background: linear-gradient(135deg, #667eea, #764ba2);

เกรเดียนต์แนวรัศมี — สีแผ่กระจายจากจุดศูนย์กลางในรูปแบบวงกลมหรือวงรี

background: radial-gradient(circle, #667eea, #764ba2);

เกรเดียนต์แนวกรวย — สีหมุนรอบจุดศูนย์กลาง เหมือนวงล้อสี

background: conic-gradient(from 0deg, #667eea, #764ba2, #667eea);

วิธีสร้างเกรเดียนต์แบบภาพ

1. เลือกประเภทเกรเดียนต์ — เลือกเชิงเส้นหรือแนวรัศมีและตั้งมุมหรือตำแหน่ง
2. เพิ่มจุดสี — คลิกเพื่อเพิ่มสีในตำแหน่งต่างๆ ของเกรเดียนต์ ปรับแต่ละสีและตำแหน่ง
3. คัดลอก CSS — คัดลอกโค้ดที่สร้างและวางในสไตล์ชีตของคุณ

การใช้ตัวสร้างแบบภาพเร็วกว่าการเขียนไวยากรณ์ด้วยมือ โดยเฉพาะกับจุดสีหลายจุด

รูปแบบเกรเดียนต์ที่พบบ่อย

พื้นหลังส่วน hero — เกรเดียนต์สองสีที่อ่อนละมุนเพิ่มความลึกโดยไม่รบกวนข้อความ

background: linear-gradient(135deg, #0f172a, #1e3a5f);

การไฮไลต์ปุ่ม — เกรเดียนต์เล็กน้อยให้เอฟเฟกต์สามมิติแก่ปุ่ม

background: linear-gradient(180deg, #3b82f6, #2563eb);

การปกปิดบนภาพ — การปกปิดด้วยเกรเดียนต์ปรับปรุงความสามารถในการอ่านข้อความบนรูปภาพ

background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.7));

ขอบที่เน้น — ใช้เกรเดียนต์เป็นขอบเพื่อสร้างความน่าสนใจทางสายตา

border-image: linear-gradient(90deg, #667eea, #764ba2) 1;

เคล็ดลับ

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