สร้าง CSS Gradient
ปรับไล่เฉดสีด้วยตาของคุณเอง แล้วคัดลอกโค้ด CSS ที่ใช้ได้ในเบราว์เซอร์รุ่นใหม่ทุกตัว
ปิดผนึกไว้บนอุปกรณ์นี้
ทำงานในเบราว์เซอร์ของคุณ ไม่มีการอัปโหลดใด ๆ
ปิดผนึก
ตัวอย่าง
จุดสี
ลากจุดสี หรือเลือกจุดหนึ่งแล้วใช้ปุ่มลูกศร คลิกที่แถบเพื่อเพิ่มจุดสี
การตั้งค่า
OKLCH และ OKLab ช่วยเลี่ยงโซนสีเทาหม่นตรงกลางของไล่เฉดสีบางแบบ โค้ดมีเวอร์ชันมาตรฐานรวมไว้ให้สำหรับเบราว์เซอร์รุ่นเก่าด้วย
โค้ด CSS
วิธีใช้งาน
-
เลือกประเภท
เลือกไล่เฉดสีแบบเส้นตรง วงกลม หรือกรวย หรือเริ่มจากแบบสำเร็จรูป แล้วตั้งมุมหรือจุดศูนย์กลาง
-
แก้ไขสี
ลากจุดสีไปตามแถบ คลิกที่แถบเพื่อเพิ่มจุด และเปลี่ยนสีและตำแหน่งของแต่ละจุด
-
คัดลอก CSS
คัดลอกโค้ดที่สร้างขึ้น แล้ววางลงในสไตล์ชีตของคุณเป็นพื้นหลัง
คำถามที่พบบ่อย
ไล่เฉดสีแบบเส้นตรง วงกลม และกรวยต่างกันอย่างไร
แบบเส้นตรง (Linear) เปลี่ยนสีไปตามเส้นตรงในมุมที่คุณเลือก แบบวงกลม (Radial) กระจายออกจากจุดศูนย์กลางเป็นวงกลมหรือวงรี แบบกรวย (Conic) หมุนรอบจุดศูนย์กลางเหมือนเข็มนาฬิกา เหมาะสำหรับวงล้อสีและแผนภูมิวงกลม
CSS ที่สร้างขึ้นใช้ได้ในทุกเบราว์เซอร์หรือไม่
ไล่เฉดสีแบบเส้นตรง วงกลม และกรวยใช้ได้ในเบราว์เซอร์ปัจจุบันทุกตัว เมื่อคุณเลือกการผสมสีแบบ OKLCH หรือ OKLab โค้ดจะมีบรรทัดมาตรฐานไว้ก่อน เบราว์เซอร์รุ่นเก่าจึงยังแสดงไล่เฉดสีได้
ทำไมไล่เฉดสีของฉันดูเป็นสีเทาตรงกลาง
การผสมสองสีที่ต่างกันมากในปริภูมิสี sRGB มาตรฐาน มักผ่านโซนสีเทาหม่น ให้เปลี่ยนการผสมสีเป็น OKLCH หรือ OKLab ซึ่งผสมสีตามที่ตามนุษย์รับรู้ ตรงกลางจึงยังสดใส
ใช้สีโปร่งใสได้หรือไม่
ได้ พิมพ์สีที่มีความโปร่งใส เช่น rgb(52 66 217 / 0.4) หรือ #3442d966 ในช่องสีของจุดสี เหมาะมากสำหรับเลเยอร์ซ้อนบนรูปภาพ
เพิ่มจุดสีได้กี่จุด
ได้มากเท่าที่ต้องการ แต่ละจุดเลื่อนได้ด้วยเมาส์ การสัมผัส หรือปุ่มลูกศร และลบได้ตราบที่ยังเหลืออย่างน้อยสองจุด