Go Toolstack

ตัวสร้างรูปทรง CSS Blob

สร้างรูปทรงเรขาคณิตอินทรีย์แบบ Blob สุ่มหรือกำหนดเอง พร้อมโค้ด SVG และ CSS border-radius

ตัวสร้างรูปทรง CSS Blob

สร้างรูปทรงเรขาคณิตอินทรีย์แบบ Blob สุ่มหรือกำหนดเอง พร้อมโค้ด SVG และ CSS border-radius

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

1
Set Criteria & Options
Select length, format, or generation parameters for your output.
2
Generate Instantly
Generate secure, random, or custom data entirely in your browser.
3
Copy or Export
Copy the generated output to your clipboard or download the file.

Discover more client side utilities in this category

ศูนย์รูปภาพ & การออกแบบ • เวิร์กโฟลว์และคู่มือเปรียบเทียบ

สำรวจเครื่องมือรูปภาพ & การออกแบบทั้งหมด ขีดจำกัดของเบราว์เซอร์ และคู่มือการเลือกเครื่องมือ

สำรวจศูนย์ →
จัดรูปแบบ ตรวจสอบ และทำความสะอาด JSON

จัดรูปแบบ บีบอัด และตรวจสอบข้อมูล JSON ด้วยความแม่นยำ 64-bit และกฎ JSON Schema (Draft-07 / 2020-12)
เข้ารหัสและถอดรหัส Base64

แปลงข้อความและข้อมูลระหว่างข้อความธรรมดากับ Base64 รองรับ UTF-8 ภาษาไทย และรูปแบบ URL-Safe
จัดรูปแบบ SQL

จัดรูปแบบแบบสอบถาม SQL ปรับเยื้องและจัดระเบียบคำสั่ง รองรับหลายไดอะเลกต์

คู่มือบล็อกที่เกี่ยวข้อง

คู่มือทางเทคนิค การแก้ไขปัญหา และขั้นตอนการปฏิบัติที่ดีที่สุด

รูปภาพ & การออกแบบ • ~4 นาทีในการอ่าน

เปรียบเทียบการบีบอัดรูปภาพ WebP, AVIF, JPEG และ PNG: คุณภาพ ขนาดไฟล์ และการประมวลผลจริง | GoToolstack

วิเคราะห์เชิงเปรียบเทียบรูปแบบการบีบอัดรูปภาพ WebP, AVIF, JPEG และ PNG ทำความเข้าใจความแตกต่างระหว่าง Lossy และ Lossless การประมวลผลด้วย HTML5 Canvas และ WebAssembly ในเบราว์เซอร์

อ่านคู่มือ →
รูปภาพ & การออกแบบ • ~4 นาทีในการอ่าน

วิธีตรวจดูและลบข้อมูล EXIF ในภาพถ่าย: ปกป้องตำแหน่ง GPS และข้อมูลส่วนบุคคลก่อนแชร์ออนไลน์ | GoToolstack

วิธีตรวจสอบและลบข้อมูลเมทาดาตา EXIF ที่ฝังอยู่ในรูปภาพ รวมถึงพิกัดดาวเทียม GPS รุ่นกล้อง และวันเวลาถ่ายภาพ ด้วยการเรนเดอร์ใหม่บน Canvas ในเบราว์เซอร์เพื่อความปลอดภัย

อ่านคู่มือ →
ศูนย์ความรู้และแนวคิด

เครื่องมือสร้างรูปทรงของเหลว Organic CSS & SVG Blob ปรับแต่งทรงโค้งธรรมชาติ

รูปทรงโค้งมนแบบออร์แกนิก (Blob Shapes) เป็นองค์ประกอบกราฟิกยอดนิยมในการออกแบบเว็บไซต์ยุคใหม่ ช่วยลดความแข็งกระด้างของรูปทรงเรขาคณิตทั่วไป และเพิ่มความรู้สึกนุ่มนวล มีชีวิตชีวาให้แก่พื้นหลังภาพและส่วนหัวเว็บไซต์ (Hero Section)

เครื่องมือนี้ช่วยสร้างรูปทรง Blob ที่สวยงามและไม่สมมาตรตามหลักคณิตศาสตร์ ผู้ใช้สามารถปรับแต่งความซับซ้อน ความโค้งมน และสุ่มรูปทรงใหม่ได้ในคลิกเดียว พร้อมส่งออกโค้ดเป็นคุณสมบัติ CSS border-radius (8 มิติ) หรือดาวน์โหลดไฟล์เวกเตอร์ SVG คุณภาพสูงไปใช้งานได้ทันที

สูตรและหลักการทางเทคนิค

ไวยากรณ์ CSS ขั้นสูง: border-radius: a% (100-a)% b% (100-b)% / c% d% (100-d)% (100-c)%

คู่มุมในแนวนอนและแนวตั้งถูกคำนวณส่วนเสริมให้รวมกันได้ 100% เพื่อสร้างความโค้งของเส้นโค้งปิดที่เรียบเนียนและไม่สมมาตรอย่างเป็นธรรมชาติ

ข้อแนะนำและวิธีปฏิบัติที่ถูกต้อง

  • เลือกความซับซ้อนระดับ 5 ถึง 7 สำหรับพื้นหลังสไตล์มินิมอล: รูปทรงที่ไม่ซับซ้อนเกินไปจะช่วยเสริมให้เนื้อหาด้านหน้าโดดเด่นโดยไม่แย่งความสนใจของผู้อ่าน
  • ใช้ตัวเลือก Copy CSS สำหรับเลย์เอาต์น้ำหนักเบา: การใช้คุณสมบัติ border-radius บนแท็ก
    ช่วยให้ได้รูปทรง Blob โดยไม่ต้องโหลดองค์ประกอบ SVG DOM เพิ่มเติม
  • ส่งออกเป็น SVG เมื่อต้องการใช้การไล่ระดับสีหรือทำ Clipping Mask: ไฟล์ SVG เหมาะสำหรับการใส่สีแบบ Multi-stop Gradients หรือใช้เป็นหน้ากากตัดขอบรูปภาพ (Image Clip-path)
  • จับคู่กับเครื่องมือ CSS Mesh Gradient เพื่อเพิ่มมิติความสวยงาม: นำรูปทรง Blob ที่ได้ไปใส่พื้นหลังแบบเกรเดียนต์เพื่อสร้างมิติภาพที่ทันสมัยและสะดุดตา

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

ไวยากรณ์ CSS border-radius แบบ 8 ค่าทำงานอย่างไรในการสร้างรูปทรงอิสระ?
ไวยากรณ์ border-radius: a b c d / e f g h กำหนดรัศมีความโค้งในแนวนอนและแนวตั้งแยกกันสำหรับมุมทั้งสี่ของกล่อง ทำให้เกิดความโค้งแบบออร์แกนิกที่ไม่สมมาตรโดยไม่ต้องใช้เวกเตอร์ภายนอก
รูปทรง SVG Blob ที่สร้างขึ้นสามารถนำไปทำแอนิเมชันขยับรูปทรง (Morphing) ได้หรือไม่?
สามารถทำได้ โดยส่งออกข้อมูลพาธ SVG ที่มีจำนวนจุดพิกัดเท่ากัน แล้วนำไปทำแอนิเมชันการเปลี่ยนรูปทรงผ่าน CSS หรือ GSAP (d: path(...)) ได้อย่างลื่นไหล
มีขีดจำกัดความละเอียดของไฟล์ SVG ที่ส่งออกหรือไม่?
ไม่มี เพราะ Scalable Vector Graphics (SVG) ถูกกำหนดด้วยเส้นโค้งทางคณิตศาสตร์แบบเบซิเยร์ ทำให้สามารถขยายขนาดได้ไม่จำกัดโดยไม่สูญเสียความคมชัด