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