🌅เครื่องมือสร้าง CSS Gradient

ความแตกต่างระหว่าง linear radial และ conic

CSS Gradient มี 3 ฟังก์ชันที่มีวิธีเปลี่ยนแปลงสีต่างกัน ล้วนใช้กับคุณสมบัติ background

• linear-gradient：linear-gradient เป็น Gradient เส้นตรงที่สีเปลี่ยนไปตามเส้นตรงในมุมที่ระบุ
• radial-gradient：radial-gradient เป็น Gradient วงกลมที่สีกระจายออกจากศูนย์กลางไปด้านนอกในรูปวงกลมหรือรูปวงรี
• conic-gradient：conic-gradient เป็น Gradient พัดลมที่สีเปลี่ยนไปในขณะหมุนรอบศูนย์กลางตามเข็มนาฬิกาครบรอบ

ความสัมพันธ์ระหว่างมุมและคำหลัก

มุมของ linear-gradient โดย 0deg ชี้จากล่างขึ้นบน และค่าที่สูงขึ้นจะหมุนตามเข็มนาฬิกา มุมสามารถเขียนเป็นคำหลักทิศทางเช่น 'to right' และ 90deg เท่ากับ 'to right' และ 180deg เท่ากับ 'to bottom'

วิธีเขียนจุดหยุดสีและความโปร่งใส

จุดหยุดสี (Color Stop) คือตำแหน่งในการไล่ระดับสีที่สีนั้น ๆ ปรากฏ โดย 0% คือจุดเริ่มต้น และ 100% คือจุดสิ้นสุด ตัวอย่าง '#3B82F6 0%, #8B5CF6 100%' ระบุว่าสีเปลี่ยนจากน้ำเงินที่จุดเริ่มต้นไปเป็นม่วงที่จุดสิ้นสุด

• รูปแบบ #RRGGBB：รูปแบบ #RRGGBB เป็นวิธีเขียนสีที่แสดงความเข้มของสีแดง เขียว น้ำเงินด้วยเลขฐาน 16 สองหลักแต่ละสี #FF0000 แสดงถึงสีแดงที่ไม่มีความโปร่งใส
• รูปแบบ rgba：รูปแบบ rgba เป็นวิธีเขียนสีที่เพิ่มความโปร่งใส (0-1) ลงในค่าสีแดง เขียว น้ำเงิน (0-255) ความโปร่งใส 0.5 แสดงถึงสีที่โปร่งใสครึ่งหนึ่ง