ข้ามไปยังเนื้อหาหลัก
LibraTool logoLibraTool

สร้าง CSS Gradient ฟรี

สร้าง CSS gradient แบบเชิงเส้น เชิงรัศมี และรูปกรวยพร้อมตัวอย่างสดๆ คัดลอก CSS ในคลิกเดียว

ใช้งานได้แบบออฟไลน์เมื่อโหลดแล้ว
background: linear-gradient(135deg, #14b8a6 0%, #6366f1 100%);

หลีกเลี่ยงจุดกึ่งกลางสีเทาระหว่างสีที่ต่างกันมาก และเพิ่มบรรทัด sRGB ธรรมดาเป็นตัวสำรองสำหรับเบราว์เซอร์รุ่นเก่า

0%
100%

ค่าสำเร็จรูป

การใช้งานทั่วไป

  • สร้างการไล่ระดับสีสำหรับส่วน Heroออกแบบพื้นหลังการไล่ระดับสีแบบเต็มหน้าสำหรับส่วน hero และหน้าแรกของเว็บไซต์
  • สร้างปุ่มและ CTA ที่มีการไล่ระดับสีออกแบบพื้นหลังปุ่มการไล่ระดับสีที่สวยงามสำหรับการเรียกร้องการดำเนินการที่โดดเด่น
  • สร้างพื้นหลังการไล่ระดับสีสำหรับการ์ดออกแบบการเติมการไล่ระดับสีสำหรับการ์ด โมดัล แถบด้านข้าง และพื้นหลังขององค์ประกอบ UI
  • สร้างการไล่ระดับสีสำหรับกราฟิกสื่อสัญญาณออกแบบพื้นหลังการไล่ระดับสีที่มีชีวิตชีวาสำหรับโพสต์ Instagram ภาพขนาดย่อ YouTube และการ์ด Twitter
  • สร้างมาตราส่วนสีสำหรับแผนภูมิสร้างมาตราส่วนสีการไล่ระดับสำหรับแผนที่ความร้อน แถบความก้าวหน้า และการสร้างภาพข้อมูล

วิธีการทำงาน

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

  1. 1
    ตั้งค่าจุดสีและทิศทาง
    คุณตั้งจุดสี 2 ถึง 6 จุดด้วยตัวเลือกสีเนทีฟของเบราว์เซอร์ แล้ววางตำแหน่งแต่ละจุดบนแกน 0–100% ด้วยแถบเลื่อน สำหรับไล่สีแบบเชิงเส้นและกรวย คุณเลือกมุม (0–360°) ด้วย สำหรับไล่สีแบบรัศมี คุณเลือกรูปทรง (วงรีหรือวงกลม) และคีย์เวิร์ดขนาดที่กำหนดว่าไล่สีจะขยายไปไกลแค่ไหน
  2. 2
    buildCss ประกอบสตริงไล่สี
    ทุกครั้งที่เปลี่ยน ฟังก์ชัน buildCss ในเครื่องจะต่อพารามิเตอร์ของคุณเป็นการเรียกฟังก์ชัน CSS ที่ถูกต้อง — เช่น linear-gradient(135deg, #0ea5e9 0%, #14b8a6 100%) ไม่มีไลบรารีเกี่ยวข้อง สตริงสร้างด้วยตรรกะเทมเพลต JavaScript ธรรมดาและเชื่อมจากอาร์เรย์จุดสีโดยตรง
  3. 3
    ตัวอย่างสดเรนเดอร์ผ่าน inline style
    สตริงไล่สีที่ประกอบแล้วถูกใช้กับองค์ประกอบ div โดยตรงเป็น inline background style เอนจิน CSS ของเบราว์เซอร์จึงเรนเดอร์ตัวอย่าง ไม่มี canvas หรือภาพเกี่ยวข้อง — สิ่งที่คุณเห็นคือคุณสมบัติ CSS ที่ถูกใช้จริง
  4. 4
    ผลลัพธ์พร้อมคัดลอกในสี่รูปแบบ
    ตัวเลือกรูปแบบแปลงสตริงไล่สีเดียวกันเป็น CSS ธรรมดา (background: ...) บล็อก CSS พร้อมสีทึบสำรอง คลาส Tailwind แบบค่ากำหนดเอง หรือการประกาศตัวแปร SCSS การคลิกคัดลอกเขียนผลลัพธ์ที่เลือกลงคลิปบอร์ดผ่าน navigator.clipboard.writeText ไล่สีปัจจุบันยังถูกเข้ารหัสใน hash ของ URL เพื่อให้บุ๊กมาร์กหรือแชร์ได้

เครื่องมือที่เกี่ยวข้อง

🟦

ตัวสร้าง CSS Grid

ออกแบบ CSS grid ตามภาพ — tracks, units และ gaps — และคัดลอก CSS และ HTML ที่สร้างขึ้น

ลองใช้
↔️

ตัวสร้าง CSS Flexbox

ทดลองใช้ flex direction, wrap, justify และ align บนรายการสด — และคัดลอก CSS

ลองใช้
🧮

เครื่องคำนวณเมทริกซ์

บวก ลบ คูณ ทรานสโพส หาอินเวอร์ส และลดรูปเมทริกซ์ รวมถึงดีเทอร์มิแนนต์ แรงก์ ค่าเจาะจง และแก้ Ax = b ได้สูงสุด 8×8 คัดลอกได้ในแตะเดียว ฟรีและเป็นส่วนตัว

ลองใช้

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