เครื่องมือสร้าง CSS Gradient
ออกแบบไล่ระดับสี CSS แบบเชิงเส้นและแบบรัศมีพร้อมดูตัวอย่างแบบเรียลไทม์ เพิ่มจุดสี กำหนดมุมองศา แล้วคัดลอกโค้ด CSS พื้นหลังที่เรียบร้อย — ทั้งหมดนี้ทำได้ในเบราว์เซอร์ของคุณ
มุม
90°
จุดสี
#f5530c
%
#ffa94d
%
background: linear-gradient(90deg, #f5530c 0%, #ffa94d 100%);
วิธีใช้ เครื่องมือสร้าง CSS Gradient
- 1
เลือกชนิดของไล่ระดับสี
สลับระหว่างแบบเชิงเส้นและแบบรัศมีได้ตามต้องการ สำหรับไล่ระดับสีแบบเชิงเส้น คุณยังกำหนดทิศทางได้ด้วยแถบเลื่อนปรับมุม ซึ่งวัดเป็นองศา
- 2
เพิ่มและกำหนดสีให้แต่ละจุด
คลิกที่ช่องสีเพื่อเลือกสีของแต่ละจุด แล้วกำหนดตำแหน่งตั้งแต่ 0 ถึง 100 เปอร์เซ็นต์ ใช้ปุ่มเพิ่มจุดสีเพื่อไล่สีแบบหลายสี หรือลบจุดออกเพื่อให้เรียบง่ายขึ้น
- 3
ดูตัวอย่างแบบเรียลไทม์
แผงตัวอย่างจะแสดงไล่ระดับสีของคุณตรงตามที่จะปรากฏจริงในเบราว์เซอร์ และอัปเดตทุกครั้งที่คุณปรับเปลี่ยน
- 4
คัดลอกโค้ด CSS
คัดลอกบรรทัด background ที่สร้างขึ้น แล้วนำไปวางในสไตล์ชีตของคุณ เป็นโค้ด CSS มาตรฐานที่ใช้งานได้กับทุกเบราว์เซอร์สมัยใหม่
คำถามที่พบบ่อย
ฉันจะสร้างไล่ระดับสีด้วย CSS ได้อย่างไร
ไล่ระดับสีแบบเชิงเส้นกับแบบรัศมีต่างกันอย่างไร
จุดสีคืออะไร
ฉันจะนำไล่ระดับสีไปใช้ในโปรเจกต์ของฉันได้อย่างไร
ข้อมูลของฉันถูกอัปโหลดไปยังเซิร์ฟเวอร์หรือไม่
เครื่องมือที่เกี่ยวข้อง
ทำงานต่อด้วยเครื่องมือที่มีประโยชน์เหล่านี้