สร้างการไล่ระดับสี CSS ที่สวยงามได้อย่างง่ายดาย

สร้างการไล่ระดับสีเชิงเส้น รัศมี และทรงกรวยที่น่าทึ่งด้วยอินเทอร์เฟซที่ใช้งานง่ายของเรา คัดลอกโค้ด CSS และใช้ในโครงการของคุณทันที

Preview

CSS ที่สร้างขึ้น

background: linear-gradient(135deg, #4F46E5, #8B5CF6);

การควบคุมการไล่ระดับสี

135°
0%
100%

ค่าที่ตั้งไว้ล่วงหน้ายอดนิยม

ตัวอย่างการไล่ระดับสี

สํารวจตัวอย่างการไล่ระดับสีที่น่าทึ่งเหล่านี้และรับแรงบันดาลใจสําหรับโครงการต่อไปของคุณ คลิกที่การไล่ระดับสีใด ๆ เพื่อโหลดลงในเครื่องกําเนิดไฟฟ้า

ซันเซ็ตบลัชออน

การไล่ระดับสีที่อบอุ่นได้รับแรงบันดาลใจจากพระอาทิตย์ตกที่สวยงาม

โอเชี่ยนบรีซ

การไล่ระดับสีที่เงียบสงบทําให้นึกถึงความรู้สึกของน้ําชายฝั่ง

มิ้นต์ฟิวชั่น

การไล่ระดับสีที่สดใหม่และทันสมัยผสมผสานระหว่างมิ้นต์และสีฟ้า

สวนเขียวชอุ่ม

การไล่ระดับสีที่สดใสแสดงถึงความงามของธรรมชาติ

ความฝันของจักรวาล

การไล่ระดับสีมหัศจรรย์ที่ได้รับแรงบันดาลใจจากท้องฟ้ายามค่ําคืน

ชั่วโมงทอง

การไล่ระดับสีที่อบอุ่นซึ่งจับสาระสําคัญของพลบค่ํา

เอกสารการไล่ระดับสี

CSS Gradients คืออะไร?

การไล่ระดับสี CSS ช่วยให้คุณแสดงการเปลี่ยนสีระหว่างสองสีขึ้นไปได้อย่างราบรื่น สามารถใช้เป็นพื้นหลังสําหรับองค์ประกอบและมีหลายประเภท:

  • การไล่ระดับสีเชิงเส้น:การเปลี่ยนสีตามเส้นตรง
  • การไล่ระดับสีในแนวรัศมี:การเปลี่ยนสีจากจุดกึ่งกลางออกไปด้านนอก
  • การไล่ระดับสีกรวย:การเปลี่ยนสีรอบจุดกึ่งกลางในวงกลม

วิธีใช้การไล่ระดับสี

เมื่อคุณสร้างการไล่ระดับสีโดยใช้เครื่องมือของเราแล้ว คุณสามารถใช้โค้ด CSS ในโปรเจ็กต์ของคุณได้:

  1. คัดลอกโค้ด CSS จากตัวสร้าง
  2. วางลงในไฟล์ CSS ของคุณ หรือใช้แบบอินไลน์ในองค์ประกอบ HTML ของคุณ
  3. ใช้การไล่ระดับสีกับองค์ประกอบใดๆ โดยใช้background property.
.my-element {
background: linear-gradient(135deg, #4F46E5, #8B5CF6);
}

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

การสนับสนุนเบราว์เซอร์

การไล่ระดับสี CSS ได้รับการสนับสนุนอย่างกว้างขวางในเบราว์เซอร์สมัยใหม่ อย่างไรก็ตาม เบราว์เซอร์รุ่นเก่า เช่น Internet Explorer อาจแสดงผลไม่ถูกต้อง ระบุสีสํารองเสมอ:

.my-element {
background: #4F46E5; /* Fallback color */
background: linear-gradient(135deg, #4F46E5, #8B5CF6);
}

Chrome

26+

Firefox

16+

Safari

6.1+

Edge

12+

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

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

Features

ง่ายต่อการใช้

อินเทอร์เฟซที่ใช้งานง่ายสําหรับการสร้างการไล่ระดับสี

การออกแบบที่ตอบสนอง

ทํางานได้อย่างสมบูรณ์แบบบนทุกขนาดหน้าจอ

คัดลอก-วางพร้อม

รับโค้ด CSS ที่สะอาดทันที

มีค่าที่ตั้งไว้ล่วงหน้า

เริ่มต้นด้วยการไล่ระดับสีที่สวยงามที่กําหนดไว้ล่วงหน้า

Related Tools

ตัวย่อขนาด CSS

บีบอัดและเพิ่มประสิทธิภาพโค้ด CSS ของคุณด้วยความแม่นยําระดับมืออาชีพ

Less to CSS Converter

แปลงโค้ด Less ของคุณเป็น CSS รวดเร็ว ง่ายดาย และปลอดภัย

สร้างการแปลง CSS3 ได้อย่างง่ายดาย

เครื่องมือที่ทรงพลังและใช้งานง่ายสําหรับการสร้างการแปลง CSS3 ที่ซับซ้อนโดยไม่ต้องเขียนโค้ด แสดงภาพการเปลี่ยนแปลงแบบเรียลไทม์และคัดลอก CSS ที่สร้างขึ้นเพื่อใช้ในโครงการของคุณ

ตัวแปลงตัวเลขดิจิตอล

แปลงระหว่างระบบเลขฐานสอง ทศนิยม เลขฐานสิบหก และฐานแปดอย่างแม่นยํา

Generate dummy text for your designs

สร้างข้อความตัวยึดตําแหน่งที่สมจริงสําหรับเว็บไซต์ แอป และเอกสารของคุณด้วยตัวสร้าง Lorem Ipsum ของเรา

HSV เป็น HEX

แปลงรหัสสี HSV เป็นค่า HEX สําหรับการออกแบบเว็บ