---

CSS Gradient คืออะไร?

CSS gradients สร้างการเปลี่ยนสีอย่างราบรื่นในโค้ด CSS โดยไม่ต้องใช้ไฟล์รูปภาพ มี 3 ประเภท: linear-gradient เปลี่ยนสีตามเส้นตรง radial-gradient ขยายออกจากจุดศูนย์กลางในรูปวงกลมหรือวงรี และ conic-gradient หมุนสีรอบจุดศูนย์กลางเหมือนวงล้อสี ทั้งสามประเภทเชื่อมโยงจุดหยุดสีหลายจุด — สีแต่ละสีที่ตำแหน่งเฉพาะ (0%–100%) — ทำให้คุณมีการควบคุมแบบแม่นยำของการกระจายสี Gradients ใช้กันอย่างแพร่หลายในพื้นหลังของหน้าแรก เติมปุ่ม การซ้อนทับ แถบความคืบหน้า และตัวแบ่งแบบตกแต่ง

วิธีใช้เครื่องมือสร้าง CSS Gradient

1. เลือกประเภท gradient: Linear, Radial หรือ Conic

2. สำหรับ linear gradients ปรับสไลเดอร์มุม (0–360°) หรือพิมพ์มุมโดยตรง

3. สำหรับ radial gradients เลือกรูปร่าง: วงกลมหรือวงรี

4. แก้ไขจุดหยุดสี — คลิกตัวอย่างสีเพื่อเปิดเครื่องเลือกสี และลากเลื่อนตำแหน่งจุดหยุด

5. คลิก '+ เพิ่มจุดหยุดสี' เพื่อเพิ่มจุดการเปลี่ยนแปลงสีเพิ่มเติม

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

7. คัดลอก CSS ที่สร้างขึ้นและวางลงในสไตล์ชีตของคุณ

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

ฉันจะสร้าง gradient ที่โปร่งใสได้อย่างไร? ใช้ค่าสีของ rgba() หรือ hsla() พร้อมกับช่อง alpha ที่ 0 สำหรับความโปร่งใสทั้งหมด ตัวอย่างเช่น rgba(0,0,0,0) คือสีดำโปร่งใสทั้งหมด มีประโยชน์สำหรับซ้อนทับเบลอบนรูปภาพ

ฉันจะสร้างจุดหยุดสีที่แข็ง (ไม่มีการเปลี่ยนแปลง) ได้อย่างไร? วางจุดหยุดสีสองจุดไว้ที่ตำแหน่งเดียวกัน — หนึ่งจบและหนึ่งเริ่มต้นที่จุดนั้น ตัวอย่างเช่น สีแดง 50%, สีน้ำเงิน 50% สร้างการสลับโดยทันทีจากแดงเป็นน้ำเงินที่จุดกลางโดยไม่มี gradient transition

เบราว์เซอร์ใดรองรับคำชี้แจงเชิงหมวดอ้อม? conic gradients ได้รับการสนับสนุนในเบราว์เซอร์ทั่วไปทั้งหมด (Chrome 69+, Firefox 83+, Safari 12.1+, Edge 79+) ไม่รองรับใน Internet Explorer

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

Keywords: เครื่องมือสร้าง CSS gradient, gradient เชิงเส้น, gradient รัศมี, gradient เชิงมุม, เครื่องมือสร้างพื้นหลัง CSS, ตัวเลือกสี gradient, เครื่องมือ CSS gradient