แปลงฟรี

การไล่ระดับสี CSS เครื่องกำเนิดไฟฟ้า

สร้างการไล่ระดับสี CSS ด้วยสายตาพร้อมการแสดงตัวอย่างสด สร้างการไล่ระดับสีเชิงเส้น รัศมี และทรงกรวยด้วยการหยุดสีแบบกำหนดเอง — ฟรีและฝั่งไคลเอ็นต์

ดูตัวอย่างสด
เอาต์พุต CSS
.element {
  background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%);
}
Gradient Type
มุม (90deg)
90°180°270°360°
Color Stops
#6366f10%
#ec4899100%

เกี่ยวกับเครื่องมือนี้

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

วิธีใช้งาน

  1. เลือกประเภทการไล่ระดับสี: เชิงเส้นหรือแนวรัศมี
  2. เพิ่มการหยุดสีโดยคลิกแถบไล่ระดับสีแล้วเลือกสี
  3. ปรับมุมไล่ระดับสี (เชิงเส้น) หรือตำแหน่ง (รัศมี) โดยใช้ตัวควบคุม
  4. คัดลอกโค้ด CSS ที่สร้างขึ้นจากแผงเอาต์พุต

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

การไล่ระดับสี CSS ใช้งานได้กับทุกเบราว์เซอร์หรือไม่
การไล่ระดับสี CSS สมัยใหม่ (การไล่ระดับสีเชิงเส้น การไล่ระดับสีแบบรัศมี) ได้รับการสนับสนุนในเบราว์เซอร์ปัจจุบันทั้งหมด รวมถึง Chrome, Firefox, Safari และ Edge เครื่องมือนี้สามารถสร้างคำนำหน้า -webkit- สำหรับเบราว์เซอร์เวอร์ชันเก่าได้อีกด้วย
ฉันสามารถสร้างการไล่ระดับสีหลายสีได้หรือไม่
ใช่. เพิ่มการหยุดสีได้มากเท่าที่คุณต้องการ คุณยังสามารถปรับตำแหน่งของแต่ละจุดเพื่อควบคุมว่าสีจะผสมกันที่ไหน ซึ่งช่วยให้สามารถไล่ระดับสีรุ้ง พระอาทิตย์ตก หรือการไล่ระดับสีแบรนด์แบบกำหนดเองได้
การไล่ระดับสีเชิงเส้นและรัศมีแตกต่างกันอย่างไร
การไล่ระดับสีเชิงเส้นจะเปลี่ยนสีตามเส้นตรง (บนลงล่าง ซ้ายไปขวา แนวทแยง หรือมุมใดก็ได้) การไล่ระดับสีแบบรัศมีจะเปลี่ยนสีออกจากจุดศูนย์กลางเป็นรูปวงกลมหรือวงรี
ฉันสามารถใช้การไล่ระดับสีเป็นพื้นหลังสำหรับข้อความได้หรือไม่
ใช่. ใช้พื้นหลังคลิป: ข้อความที่มี -webkit-text-fill-color: โปร่งใสเพื่อใช้การไล่ระดับสีกับข้อความ CSS ที่สร้างขึ้นให้คำจำกัดความของการไล่ระดับสี — รวมกับคุณสมบัติเหล่านี้สำหรับข้อความการไล่ระดับสี