ตัวสร้าง CSS Gradient
색상 정지점
0%
100%
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); อัปเดตล่าสุด: 2026 · เครื่องมือออนไลน์ฟรี
ตัวสร้าง CSS Gradient คืออะไร?
เครื่องมือสร้าง CSS gradient แบบภาพออนไลน์ฟรี ออกแบบ gradient แบบ linear, radial และ conic เพิ่มจุดหยุดสี ปรับมุม แล้วคัดลอกโค้ด CSS พร้อมใช้สำหรับพื้นหลังเว็บไซต์
วิธีใช้งาน
- 1 เลือกประเภท — เลือกประเภท gradient (เชิงเส้น, แนวรัศมี, รูปกรวย)
- 2 ปรับจุดหยุดสี — ปรับสีและตำแหน่งของจุดหยุดสีแต่ละจุด
- 3 ดูตัวอย่าง — ตรวจสอบผลลัพธ์แบบเรียลไทม์ในตัวอย่าง
- 4 คัดลอกโค้ด CSS — คัดลอกโค้ด CSS ไปยังคลิปบอร์ดด้วยปุ่ม 'คัดลอก'
เครื่องมือที่เกี่ยวข้อง
ตัวสร้าง CSS Box Shadow เครื่องมือสร้าง CSS box-shadow ออนไลน์ฟรี ปรับค่า offset, blur, spread, สี และ inset พร้อมแสดงตัวอย่างเงาแบบเรียลไทม์ และสร้างโค้ด CSS box-shadow พร้อมคัดลอก
ตัวสร้าง CSS Border Radius เครื่องมือสร้าง CSS border-radius ออนไลน์ฟรี พร้อมจุดควบคุมมุมอิสระ 8 จุดและตัวเลื่อน แสดงตัวอย่างรูปทรงมุมโค้งแบบเรียลไทม์ และสร้างโค้ด CSS border-radius พร้อมคัดลอก
ตัวแปลงรหัสสี เครื่องมือแปลงสีออนไลน์ฟรี แปลงระหว่างรหัส HEX, RGB, HSL และ OKLCH ได้ทันที พร้อมคำนวณอัตราส่วนคอนทราสต์ WCAG ระหว่างสองสีเพื่อตรวจสอบความสอดคล้องด้านการเข้าถึงได้ง่าย
คำถามที่พบบ่อย
ไม่มีขีดจำกัด แต่โดยทั่วไป 2-6 จุด มากเกินไปอาจส่งผลต่อประสิทธิภาพ
รองรับ เปิดใช้งานกล่องกาเครื่องหมาย 'ทำซ้ำ' เพื่อเพิ่มคำนำหน้า repeating
มี 5 พรีเซ็ต: Sunset, Ocean, Forest, Midnight และ Rainbow
ปัจจุบันรองรับเฉพาะ CSS บริสุทธิ์ การแปลง Tailwind มีแผนจะเพิ่มในการอัปเดตในอนาคต
ไม่ การประมวลผลทั้งหมดทำในเบราว์เซอร์