โค้ดที่ได้ใช้งานได้กับทุกเบราว์เซอร์หรือไม่

ได้ โค้ดใช้คุณสมบัติ radial-gradient() มาตรฐานของ CSS ซึ่งรองรับในทุกเบราว์เซอร์สมัยใหม่โดยไม่ต้องใช้พรีฟิกซ์พิเศษใด ๆ

สร้าง Mesh Gradient

สร้างพื้นหลังสไตล์โมเดิร์นด้วยการไล่สีหลายจุดผสมผสานกันอย่างนุ่มนวล (สไตล์ Mesh Gradient ที่นิยมในงานออกแบบเว็บยุคใหม่) โดยใช้ radial-gradient() ซ้อนทับกันหลายชั้นพร้อมสีสุ่มที่สวยงาม — แตกต่างจากเครื่องมือ CSS Gradient ที่สร้างไล่สีแบบสองสีง่าย ๆ และเครื่องมือ Blob Pattern ที่วาดเพียงทรงเดียว คุณสามารถควบคุมจำนวนจุดสีและสีหลัก สุ่มลายใหม่ได้ในคลิกเดียว แล้วคัดลอกโค้ด CSS ที่พร้อมใช้งานได้โดยตรง ทุกอย่างทำงานทันทีในเบราว์เซอร์ของคุณ — ไม่มีการอัปโหลดข้อมูลใด ๆ ขึ้นเซิร์ฟเวอร์เลย

เครื่องมือออกแบบและ CSS ทำงานในเบราว์เซอร์ของคุณทั้งหมด

การประมวลผลทั้งหมดเกิดขึ้นบนอุปกรณ์ของคุณ — ไม่มีการส่งข้อมูลใด ๆ ไปยังเซิร์ฟเวอร์

จำนวนจุดสี5สีหลัก

โค้ด CSS

background-color: #f5f3ff;
background-image: radial-gradient(at 34% 34%, #e4cd67 0px, transparent 50%), radial-gradient(at 66% 25%, #8de467 0px, transparent 50%), radial-gradient(at 84% 63%, #e4677a 0px, transparent 50%), radial-gradient(at 31% 33%, #67e482 0px, transparent 50%), radial-gradient(at 55% 55%, #cde467 0px, transparent 50%);

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

เครื่องมือ CSS Gradient สร้างไล่สีแบบเส้นตรงหรือรัศมีระหว่างสองสีง่าย ๆ ส่วนเครื่องมือนี้จะซ้อนจุดสีสุ่มหลายจุดทับกันเพื่อสร้างพื้นหลังหลายสีที่นุ่มนวลในสไตล์ Mesh Gradient แบบโมเดิร์น