ตัวสร้างไล่เฉดสี CSS
ออกแบบพื้นหลังไล่เฉดสีด้วยภาพและคัดลอก CSS ที่พร้อมใช้ ลากจุดสีไปตามแถบ คลิกแถบเพื่อเพิ่มจุด เปลี่ยนมุมหรือจุดศูนย์กลาง และทำให้สีโปร่งใสได้ โค้ดมีสีทึบสำรองสำหรับเบราว์เซอร์รุ่นเก่า
วิธีใช้
- เลือกแบบเส้นตรง วงกลม หรือกรวย หรือเริ่มจากค่าที่ตั้งไว้หรือสีไล่เฉดแบบสุ่ม
- คลิกจุดสีเพื่อแก้ไขสี ความทึบ และตำแหน่ง ลากเพื่อย้าย หรือคลิกแถบเพื่อเพิ่มอีกจุด
- คัดลอก CSS แล้ววางลงในกฎของ element
คำถามที่พบบ่อย
การไล่เฉดแบบเส้นตรง วงกลม และกรวยต่างกันอย่างไร
การไล่เฉดแบบเส้นตรง (linear) เปลี่ยนสีไปตามเส้นตรงตามมุมที่คุณเลือก แบบวงกลม (radial) แผ่ออกจากจุดศูนย์กลางเป็นวงกลมหรือวงรี แบบกรวย (conic) หมุนรอบจุดศูนย์กลางเหมือนเข็มนาฬิกา เหมาะกับวงล้อสีและแผนภูมิวงกลม
การไล่เฉดสี CSS ใช้ได้กับทุกเบราว์เซอร์หรือไม่
ได้ การไล่เฉดแบบเส้นตรง วงกลม และกรวยทำงานได้ใน Chrome, Edge, Firefox และ Safari ทุกเวอร์ชันปัจจุบันโดยไม่ต้องมี prefix บรรทัด background แรกเป็นสีเรียบ ใช้เฉพาะเบราว์เซอร์เก่ามาก
ทำลายทางอย่างไร
วางจุดสีเดียวกันสองจุดที่ต้นและปลายของแต่ละแถบ เพื่อให้สีเปลี่ยนทันทีแทนการผสมกัน แล้วเปิดตัวเลือกทำซ้ำ ค่าที่ตั้งไว้อันสุดท้ายเป็นตัวอย่าง
🏷️ ตัวสร้าง Meta Tag
🖼️ ตัวสร้าง Open Graph
🔗 ตัวสร้างลิงก์ UTM
🔲 ตัวสร้าง CSS Box Shadow