ตัวสร้าง CSS Gradient

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

ตัวสร้างนี้รองรับสามประเภท: linear-gradient (สีตามเส้นตรง), radial-gradient (สีแผ่ออกจากจุดศูนย์กลาง) และ conic-gradient (สีหมุนรอบจุดศูนย์กลางเหมือนหน้าปัดนาฬิกา)

Gradient เชิงเส้นเปลี่ยนสีตามเส้นตรงที่กำหนดโดยมุมหรือคีย์เวิร์ดทิศทาง Gradient รัศมีเปลี่ยนสีออกจากจุดศูนย์กลางในรูปแบบวงกลมหรือวงรี

สามารถใช้จุดหยุดสีได้มากเท่าที่ต้องการ แต่ละจุดกำหนดสีและตำแหน่งที่เลือกได้ (0% ถึง 100%) ตามเส้น gradient หลายจุดสร้างการเปลี่ยนผ่านหลายสีที่ซับซ้อน

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

จุดหยุดสีกำหนดสีเฉพาะที่ตำแหน่งเฉพาะตามเส้น gradient ตัวอย่างเช่น "red 0%, blue 50%, green 100%" สร้าง gradient ที่เริ่มแดง เปลี่ยนเป็นน้ำเงินตรงกลาง และสิ้นสุดด้วยเขียว

ได้ gradient เชิงเส้นรองรับค่ามุมตั้งแต่ 0deg ถึง 360deg ยังสามารถใช้คีย์เวิร์ดทิศทางเช่น "to right", "to bottom", "to top left" สำหรับมุมทั่วไป

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

CSS Gradient มีประสิทธิภาพดีมากโดยทั่วไป ขจัดคำขอ HTTP สำหรับไฟล์ภาพและได้รับการเร่งความเร็วด้วยฮาร์ดแวร์ อย่างไรก็ตาม gradient ที่ซับซ้อนมากอาจส่งผลต่อการเรนเดอร์บนอุปกรณ์ระดับต่ำ

ได้ gradient สามารถใช้สำหรับ background-image, border-image, mask-image และคุณสมบัติใด ๆ ที่ยอมรับค่าภาพ CSS ทำงานทุกที่ที่คาดหวังค่าภาพ

เบราว์เซอร์สมัยใหม่ทั้งหมดรองรับ CSS Gradient รวมถึง Chrome, Firefox, Safari, Edge และ Opera การรองรับดีมากตั้งแต่ IE10 ไม่ต้องใช้คำนำหน้าผู้ขายอีกต่อไป

ใช้ repeating-linear-gradient หรือ repeating-radial-gradient แทนเวอร์ชันมาตรฐาน สิ่งเหล่านี้จะซ้ำรูปแบบ gradient เพื่อเติมเต็มองค์ประกอบทั้งหมด สร้างเอฟเฟกต์ลายทางหรือลวดลาย

CSS Gradient ไม่สามารถแอนิเมชันโดยตรงด้วยการเปลี่ยน CSS อย่างไรก็ตามสามารถแอนิเมชัน background-position, background-size หรือใช้คุณสมบัติ CSS ที่กำหนดเองกับ @property

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