สร้างการไล่ระดับสี 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 ของคุณด้วยความแม่นยําระดับมืออาชีพ

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

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

ตัวสร้างการเปลี่ยน CSS3

การเปลี่ยนความทึบที่ราบรื่น

ตัวแปลงปัจจุบัน

แปลงกระแสไฟฟ้าระหว่างหน่วยต่างๆ ด้วยความแม่นยําและง่ายดาย

JavaScript Obfuscator

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

ตัวแปลงพลังงานปฏิกิริยา

แปลงพลังงานปฏิกิริยาระหว่างหน่วยต่างๆ ด้วยความแม่นยําและง่ายดาย