🎨 สร้างการไล่ระดับสี CSS

°

จุดกำหนดสี

การไล่ระดับสีสำเร็จรูป

หลายประเภท

รองรับประเภทการไล่ระดับสี CSS เชิงเส้น รัศมี และทรงกรวย

การควบคุมที่แม่นยำ

ปรับมุมและตำแหน่งหยุดสีได้อย่างอิสระเพื่อการไล่ระดับสีที่สมบูรณ์แบบของพิกเซล

ดูตัวอย่างสด

ดูการเปลี่ยนแปลงการไล่ระดับสีแบบเรียลไทม์เมื่อคุณปรับพารามิเตอร์

คัดลอกในคลิกเดียว

โค้ด CSS ที่สร้างขึ้นพร้อมที่จะวางลงในโครงการของคุณโดยตรง

ส่วนตัว 100%

การประมวลผลทั้งหมดเกิดขึ้นภายในเบราว์เซอร์ของคุณ ไม่มีการอัพโหลดข้อมูลไปยังเซิร์ฟเวอร์ใด ๆ

ฟรีโดยสมบูรณ์

ไม่มีการลงทะเบียนไม่มีขีดจำกัด ใช้งานได้ฟรีตลอดไป

บทความที่เกี่ยวข้อง

คู่มือการไล่ระดับสี CSS ฉบับสมบูรณ์: จากเชิงเส้นไปจนถึงทรงกรวย

คำแนะนำที่ครอบคลุมเกี่ยวกับการไล่ระดับสี CSS ทั้งสามประเภท รวมถึงไวยากรณ์ พารามิเตอร์ และตัวอย่างเชิงปฏิบัติ

คู่มือฉบับสมบูรณ์

เทรนด์การออกแบบไล่ระดับสี: การสร้างเอฟเฟกต์ภาพสมัยใหม่

สำรวจเทรนด์การออกแบบการไล่ระดับสีในปัจจุบัน ตั้งแต่การไล่ระดับสีอ่อนไปจนถึงการปะทะกันของสีที่จัดจ้าน และค้นหาแรงบันดาลใจในการออกแบบของคุณ

แนวโน้มการออกแบบ

แนวทางปฏิบัติที่ดีที่สุดด้านประสิทธิภาพการไล่ระดับสี CSS: การเพิ่มประสิทธิภาพการแสดงผล

ทำความเข้าใจว่าการไล่ระดับสี CSS ส่งผลต่อประสิทธิภาพการเรนเดอร์เพจอย่างไร และเรียนรู้การเขียนสไตล์การไล่ระดับสีที่มีประสิทธิภาพสูง

ผลงาน

การไล่ระดับสีและการเข้าถึง: การออกแบบสำหรับทุกคน

เรียนรู้วิธีใช้การไล่ระดับสีพร้อมรับประกันการเข้าถึงเว็บและการปฏิบัติตามข้อกำหนด WCAG

การเข้าถึง

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

การไล่ระดับสี CSS คืออะไร?
การไล่ระดับสี CSS เป็นเอฟเฟกต์พื้นหลังที่สร้างด้วย CSS ซึ่งสามารถเปลี่ยนสีระหว่างสองสีขึ้นไปได้อย่างราบรื่น ประเภททั่วไป ได้แก่ การไล่ระดับสีเชิงเส้น การไล่ระดับสีแบบรัศมี และการไล่ระดับสีแบบกรวย
ความแตกต่างระหว่างการไล่ระดับสีเชิงเส้นและรัศมีคืออะไร?
การไล่ระดับสีเชิงเส้นเป็นเส้นตรง (ด้วยมุมที่ปรับได้) การไล่ระดับสีในแนวรัศมีจะเปลี่ยนออกจากจุดศูนย์กลางในวงกลมหรือวงรี และการไล่ระดับสีรูปกรวยจะหมุนรอบจุดศูนย์กลาง
ฉันสามารถเพิ่มจุดสีได้กี่จุด?
ไม่มีขีดจำกัดที่ชัดเจน แต่แนะนำให้หยุดสี 2-5 สีเพื่อให้ได้เอฟเฟ็กต์ภาพที่ดีที่สุด การหยุดมากเกินไปอาจทำให้การไล่ระดับสีดูเกะกะ
เบราว์เซอร์ใดบ้างที่รองรับ CSS ที่สร้างขึ้น
เบราว์เซอร์สมัยใหม่ทั้งหมด (Chrome, Firefox, Safari, Edge) รองรับการไล่ระดับสี CSS อย่างสมบูรณ์ IE 11 รองรับการไล่ระดับสีเชิงเส้นขั้นพื้นฐาน แต่ไม่รองรับการไล่ระดับสีแบบกรวย
ฉันจะใช้สิ่งนี้ในโครงการของฉันได้อย่างไร
เพียงคลิก "คัดลอก CSS" และวางคุณสมบัติพื้นหลังที่สร้างขึ้นลงในไฟล์ CSS ของคุณ มันใช้งานได้กับองค์ประกอบ HTML ใด ๆ ที่รองรับคุณสมบัติพื้นหลัง