ตัวสร้าง CSS Gradient
สร้าง CSS gradient ที่สวยงามแบบภาพ สร้าง gradient เชิงเส้น รัศมี และกรวยด้วยจุดหยุดสีหลายจุด มุมและตำแหน่งที่กำหนดเอง คัดลอกโค้ด CSS ที่พร้อมใช้งานทันที
CSS Gradient คืออะไร?
CSS Gradient เป็นค่าภาพ CSS ที่แสดงการเปลี่ยนผ่านระหว่างสองสีขึ้นไปอย่างราบรื่นโดยไม่ใช้ไฟล์ภาพ Gradient ถูกเรนเดอร์โดยเบราว์เซอร์ ทำให้ไม่ขึ้นกับความละเอียดและมีประสิทธิภาพสูง
รองรับ CSS Gradient ประเภทใดบ้าง?
ตัวสร้างนี้รองรับสามประเภท: linear-gradient (สีตามเส้นตรง), radial-gradient (สีแผ่ออกจากจุดศูนย์กลาง) และ conic-gradient (สีหมุนรอบจุดศูนย์กลางเหมือนหน้าปัดนาฬิกา)
ความแตกต่างระหว่าง gradient เชิงเส้นและรัศมี?
Gradient เชิงเส้นเปลี่ยนสีตามเส้นตรงที่กำหนดโดยมุมหรือคีย์เวิร์ดทิศทาง Gradient รัศมีเปลี่ยนสีออกจากจุดศูนย์กลางในรูปแบบวงกลมหรือวงรี
ใช้จุดหยุดสีได้กี่จุด?
สามารถใช้จุดหยุดสีได้มากเท่าที่ต้องการ แต่ละจุดกำหนดสีและตำแหน่งที่เลือกได้ (0% ถึง 100%) ตามเส้น gradient หลายจุดสร้างการเปลี่ยนผ่านหลายสีที่ซับซ้อน
ใช้โค้ด CSS ที่สร้างอย่างไร?
คัดลอกโค้ด CSS ที่สร้างและวางเป็นค่าของคุณสมบัติ background หรือ background-image ในชีตสไตล์ CSS โค้ดทำงานในเบราว์เซอร์สมัยใหม่ทั้งหมด
จุดหยุดสีใน gradient คืออะไร?
จุดหยุดสีกำหนดสีเฉพาะที่ตำแหน่งเฉพาะตามเส้น gradient ตัวอย่างเช่น "red 0%, blue 50%, green 100%" สร้าง gradient ที่เริ่มแดง เปลี่ยนเป็นน้ำเงินตรงกลาง และสิ้นสุดด้วยเขียว
สร้าง gradient แบบมีมุมได้หรือไม่?
ได้ gradient เชิงเส้นรองรับค่ามุมตั้งแต่ 0deg ถึง 360deg ยังสามารถใช้คีย์เวิร์ดทิศทางเช่น "to right", "to bottom", "to top left" สำหรับมุมทั่วไป
CSS Gradient เป็นแบบตอบสนองหรือไม่?
ใช่ CSS Gradient เป็นแบบตอบสนองโดยธรรมชาติเพราะเป็นเวกเตอร์และเรนเดอร์โดยเบราว์เซอร์ ขยายขนาดได้อย่างสมบูรณ์แบบไปยังขนาดคอนเทนเนอร์ใด ๆ โดยไม่สูญเสียคุณภาพหรือเพิ่มขนาดไฟล์
CSS Gradient ส่งผลต่อประสิทธิภาพหน้าหรือไม่?
CSS Gradient มีประสิทธิภาพดีมากโดยทั่วไป ขจัดคำขอ HTTP สำหรับไฟล์ภาพและได้รับการเร่งความเร็วด้วยฮาร์ดแวร์ อย่างไรก็ตาม gradient ที่ซับซ้อนมากอาจส่งผลต่อการเรนเดอร์บนอุปกรณ์ระดับต่ำ
ใช้ gradient ในพื้นหลังและขอบได้หรือไม่?
ได้ gradient สามารถใช้สำหรับ background-image, border-image, mask-image และคุณสมบัติใด ๆ ที่ยอมรับค่าภาพ CSS ทำงานทุกที่ที่คาดหวังค่าภาพ
เบราว์เซอร์ใดรองรับ CSS Gradient?
เบราว์เซอร์สมัยใหม่ทั้งหมดรองรับ CSS Gradient รวมถึง Chrome, Firefox, Safari, Edge และ Opera การรองรับดีมากตั้งแต่ IE10 ไม่ต้องใช้คำนำหน้าผู้ขายอีกต่อไป
สร้าง gradient แบบซ้ำอย่างไร?
ใช้ repeating-linear-gradient หรือ repeating-radial-gradient แทนเวอร์ชันมาตรฐาน สิ่งเหล่านี้จะซ้ำรูปแบบ gradient เพื่อเติมเต็มองค์ประกอบทั้งหมด สร้างเอฟเฟกต์ลายทางหรือลวดลาย
แอนิเมชัน CSS Gradient ได้หรือไม่?
CSS Gradient ไม่สามารถแอนิเมชันโดยตรงด้วยการเปลี่ยน CSS อย่างไรก็ตามสามารถแอนิเมชัน background-position, background-size หรือใช้คุณสมบัติ CSS ที่กำหนดเองกับ @property
ตัวสร้าง gradient นี้ฟรีหรือไม่?
ใช่ ตัวสร้าง CSS Gradient นี้ฟรีอย่างสมบูรณ์ ไม่ต้องลงทะเบียน ไม่มีขีดจำกัดการใช้งาน และโค้ดที่สร้างทั้งหมดเป็นของคุณสำหรับทุกโปรเจกต์โดยไม่ต้องให้เครดิต
วิธีใช้ ตัวสร้าง CSS Gradient
สร้างเกรเดียนต์ CSS ด้วยสายตา แล้วคัดลอกโค้ดพร้อมใช้งานจริงได้ทันที การเรนเดอร์เกิดขึ้นแบบโลคัลในเบราว์เซอร์ของคุณ ไม่มีการอัปโหลดใด ๆ
- เลือก Type ของเกรเดียนต์: linear-gradient หรือ radial-gradient
- ตั้ง Angle สำหรับเกรเดียนต์เชิงเส้น หรือเลือก Shape เช่น circle หรือ ellipse สำหรับเกรเดียนต์แบบรัศมี
- เพิ่ม เปลี่ยนสี และลากจุดสีในส่วน Color Stops
- คลิกชุดสีใต้ Presets เพื่อเริ่มจากการผสมที่มีให้
- คัดลอก CSS ที่สร้างขึ้นแล้ววางลงในสไตล์ชีตของคุณ
วางจุดสีสองสีไว้ที่ตำแหน่งเดียวกันจะเกิดขอบแข็ง เป็นวิธีเร็วในการทำพื้นหลังลายทางโดยไม่ต้องใช้รูปภาพ
เครื่องมือที่เกี่ยวข้อง
- ตัวสร้าง CSS Box Shadow ตัวสร้าง CSS box-shadow ออนไลน์ฟรี สร้างเงาสวยงามแบบภาพด้วยออฟเซ็ต เบลอ กระจาย สี และ inset ที่ปรับได้ ตัวอย่างแบบเรียลไทม์และคัดลอกโค้ดทันที
- ตัวสร้าง Border Radius CSS ตัวสร้าง border-radius CSS แบบภาพ ปรับแต่ละมุมอย่างอิสระพร้อมดูตัวอย่างแบบเรียลไทม์และคัดลอกโค้ด CSS ทันที
- ตัวสร้าง CSS Grid ตัวสร้าง CSS Grid แบบภาพฟรีพร้อมตัวอย่างสด ออกแบบเลย์เอาต์กริดแบบตอบสนองเชิงโต้ตอบและส่งออกโค้ด CSS พร้อมใช้งานทันที
- ตัวสร้าง CSS Flexbox ตัวสร้าง CSS Flexbox แบบภาพพร้อมตัวอย่างสด ปรับคุณสมบัติ flex และรับโค้ด CSS พร้อมใช้งาน
- ตัวสร้าง Border Radius ตัวสร้างขอบมนสร้างสรรค์ออนไลน์ฟรี ลากจุดจับทั้งแปดหรือเลือกรูปทรงบล็อบสำเร็จรูป เพื่อสร้างรูปทรง CSS อินทรีย์และคัดลอกโค้ดได้ทันที
- ตัวแปลงสี ตัวแปลงสีออนไลน์ฟรี แปลงรูปแบบ HEX, RGB, HSL, HSV ทันทีด้วยตัวเลือกภาพ 100% ส่วนตัว ทำงานในเบราว์เซอร์ของคุณ
- ตัวสร้าง CSS Easing ตัวสร้าง easing CSS ออนไลน์ฟรี ลากจุดควบคุม cubic-bezier บนเส้นโค้งอินเทอร์แอกทีฟ เลือกจากพรีเซ็ต 18 แบบ ดูตัวอย่างลูกบอลวนซ้ำ แล้วคัดลอกฟังก์ชันจังหวะเวลาทันที
- ตัวสร้าง Text Shadow CSS ตัวสร้าง text-shadow CSS ออนไลน์ฟรี ซ้อนหลายเลเยอร์เงาพร้อมปรับออฟเซ็ต เบลอ สี และความทึบ ลองพรีเซ็ตนีออน 3D เรโทร แล้วคัดลอกโค้ด CSS ทันที