DevTulz Online

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

จุดสี

CSS Gradient คืออะไร?

CSS gradient ช่วยให้คุณแสดงการเปลี่ยนสีที่ลื่นไหลระหว่างสองสีขึ้นไปโดยไม่ต้องใช้ไฟล์รูปภาพ มีสามประเภท: linear-gradient (ตามแนวเส้นตรง), radial-gradient (แผ่จากจุดศูนย์กลาง) และ conic-gradient (หมุนรอบจุดศูนย์กลาง) Gradient ใช้สำหรับพื้นหลัง ปุ่ม การซ้อนทับ และองค์ประกอบตกแต่ง

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

  1. เลือกค่าที่ตั้งไว้ล่วงหน้าจากตัวอย่างสี หรือตั้งค่า gradient ของคุณเอง

  2. เลือกประเภท gradient: linear, radial หรือ conic

  3. ปรับมุม (สำหรับ linear/conic) หรือรูปร่าง (สำหรับ radial)

  4. แก้ไขจุดสี — เปลี่ยนสีและตำแหน่ง (0–100%)

  5. เพิ่มหรือลบจุดสีตามต้องการ

  6. คัดลอก CSS และวางลงใน stylesheet ของคุณ

Keywords: เครื่องมือสร้าง CSS gradient, linear gradient, radial gradient, conic gradient, เครื่องมือสร้างพื้นหลัง CSS, ตัวเลือกสี gradient, เครื่องมือ CSS gradient