CSS Gradient Generator ฟรี

ทำงานในเบราว์เซอร์ทั้งหมด ไม่ต้องอัปโหลด ไม่ต้องสมัครสมาชิก

ประเภท

มุม90°

Color stop

ตำแหน่ง stop 10%

ตำแหน่ง stop 2100%

โค้ด CSS

background: #6366f1;
background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%);

แชร์เครื่องมือนี้

CSS gradient generator คืออะไร

CSS gradient generator คือเครื่องมือที่ช่วยสร้างโค้ด linear-gradient(), radial-gradient() หรือ conic-gradient() ให้แบบเห็นภาพ เลือกสีที่ต้องการ ลากตำแหน่ง color stop ปรับมุม แล้วคัดลอกโค้ด CSS ที่พร้อมวางใช้งานได้ทันที พร้อมพรีวิวสดที่แสดงผลตรงกับที่เบราว์เซอร์จะแสดงจริง ทุกอย่างทำงานอยู่ในเบราว์เซอร์ของคุณเอง

วิธีใช้งาน

1เลือกประเภทของ gradient. เลือก linear, radial หรือ conic โดย linear จะมีแถบเลื่อนมุม ส่วน radial เพิ่มรูปทรง (circle หรือ ellipse) และตำแหน่ง ส่วน conic มีมุมเริ่มต้นและตำแหน่ง
2กำหนด color stop. คลิกที่แต่ละสีเพื่อเลือกสี แล้วลากแถบเลื่อนเพื่อขยับตำแหน่ง stop บน gradient เพิ่มได้สูงสุด 8 stop หรือลดลงเหลือขั้นต่ำ 2 stop
3ปรับทิศทาง. ลากแถบเลื่อนมุม (0-360 องศา) หรือเลือกคำระบุตำแหน่ง พรีวิวจะอัปเดตทันทีทุกครั้งที่เปลี่ยน
4คัดลอกโค้ด CSS. กดคัดลอกเพื่อนำ background ทั้งบรรทัดไปใช้ รวมถึงสีพื้นสำรอง แล้ววางลงใน stylesheet ของคุณ

เหมาะกับใคร

นักพัฒนาฟรอนต์เอนด์ ที่ต้องการพื้นหลังสำหรับ hero, card หรือปุ่ม และอยากได้บรรทัด linear-gradient() ที่ถูกต้องโดยไม่ต้องจำ syntax
นักออกแบบเว็บและ UI ที่ทำตาม mockup อยู่ ลอง gradient แบบเห็นภาพก่อน แล้วส่งโค้ด CSS ที่ได้ให้ทีมพัฒนาต่อได้เลย
คนทำอีเมลและแลนดิงเพจ ที่ต้องการบรรทัดสีพื้นสำรอง เพื่อให้ดีไซน์ยังดูดีในโปรแกรมอีเมลรุ่นเก่า ซึ่งตัวเครื่องมือใส่ให้อัตโนมัติ
นักเรียนที่กำลังเรียน CSS อยากเห็นว่ามุม สี stop และประเภทของ gradient ส่งผลต่อผลลัพธ์อย่างไรแบบเรียลไทม์

การเขียนโค้ด gradient เองนั้นยุ่งยาก เพราะมุม ลำดับของ stop และตำแหน่งเปอร์เซ็นต์ต่างส่งผลถึงกัน พิมพ์ผิดนิดเดียวก็ทำให้ background ทั้งบรรทัดพังแบบไม่รู้ตัว เครื่องมือนี้ทำให้ พรีวิวกับโค้ดตรงกันเป๊ะ สิ่งที่เห็นคือ CSS ที่คัดลอกไปใช้ได้เลยแบบไม่มีผิดเพี้ยน ทำงานฝั่งไคลเอนต์ทั้งหมด ไม่มีการอัปโหลดงานออกแบบของคุณไปที่ไหน

เคล็ดลับจากผู้เชี่ยวชาญ

ผลลัพธ์จะเรียง stop ตามตำแหน่งและใส่สีพื้นสำรองแบบง่าย (สีของ stop แรก) ไว้ก่อนบรรทัด gradient เพื่อให้โปรแกรมอีเมลเก่าหรือเบราว์เซอร์รุ่นโบราณแสดงสีพื้นแทนที่จะไม่แสดงอะไรเลย ส่วน syntax gradient แบบไม่ต้องใส่ prefix นั้นใช้งานได้อย่างปลอดภัยมาตั้งแต่ราวปี 2013 จึงไม่มีการใส่ prefix -webkit- ให้

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

CSS gradient generator ตัวนี้ฟรีไหม

ฟรี 100% ไม่ต้องสมัครสมาชิก ไม่มีลายน้ำ ไม่จำกัดจำนวนครั้ง สร้าง gradient ได้เท่าที่ต้องการแล้วคัดลอกโค้ด CSS ไปใช้ในโปรเจกต์ได้เลย

มีการอัปโหลดข้อมูลขึ้นเซิร์ฟเวอร์หรือไม่

ไม่มี gradient ถูกสร้างและแสดงพรีวิวทั้งหมดในเบราว์เซอร์ด้วย JavaScript ธรรมดา ไม่มีการส่งสี โค้ด หรือข้อมูลการใช้งานออกไปที่ไหนเลย

linear, radial และ conic gradient ต่างกันอย่างไร

linear gradient ผสมสีไปตามเส้นตรงในมุมที่กำหนดเอง radial gradient แผ่ออกจากจุดศูนย์กลางเป็นวงกลมหรือวงรี ส่วน conic gradient หมุนสีรอบจุดศูนย์กลาง คล้ายวงล้อสีหรือแผนภูมิวงกลม

color stop ใน CSS gradient ทำงานอย่างไร

แต่ละ stop คือคู่ของสีกับตำแหน่งตั้งแต่ 0% ถึง 100% บนเส้น gradient เบราว์เซอร์จะไล่สีระหว่าง stop ที่อยู่ติดกันอย่างนุ่มนวล หากวาง stop สองจุดที่ตำแหน่งเดียวกันจะได้ขอบคมแทนการไล่สี ซึ่งมีประโยชน์สำหรับลายทางหรือเอฟเฟกต์แผนภูมิวงกลม

เบราว์เซอร์ไหนรองรับ gradient เหล่านี้บ้าง

เบราว์เซอร์สมัยใหม่ทั้งหมด ทั้ง Chrome, Firefox, Safari และ Edge รองรับ linear-gradient() และ radial-gradient() แบบไม่ต้องใส่ prefix ส่วน conic-gradient() รองรับทุกที่มาตั้งแต่ปี 2020 โค้ดที่คัดลอกยังมีสีพื้นสำรองไว้ให้เบราว์เซอร์รุ่นเก่าด้วย

ใช้ gradient ที่สร้างเป็นสีข้อความได้ไหม

ใช้ตรง ๆ ไม่ได้ เพราะ gradient เป็นภาพ ไม่ใช่สี ต้องใส่ gradient เป็น background-image บนอิลิเมนต์ข้อความ แล้วเพิ่ม background-clip: text กับ color: transparent เพื่อให้ gradient แสดงผ่านตัวอักษร

ทำไม gradient ของฉันถึงมีลายเป็นแถบ (banding)

banding เกิดขึ้นเมื่อสอง stop ที่ห่างกันไล่สีข้ามช่วงยาวที่มีเฉดสีใกล้เคียงกัน จนเห็นขั้นสีแบบ 8 บิตชัดเจน ลดได้ด้วยการเพิ่ม color stop ตรงกลาง ย่นระยะไล่สีให้สั้นลง หรือเลือกสีที่ต่างกันทั้งความสว่างไม่ใช่แค่เฉดสี