ไล่ระดับสีเคลื่อนไหว

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

Preview

Settings

Animation type

Duration: 5s

Colors (3/5)

CSS Code

@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.animated-gradient {
    linear-gradient(-45deg, #667eea, #764ba2, #f093fb);
    animation: gradient-shift 5s ease infinite;
  background-size: 400% 400%;
}

ไล่ระดับสีเคลื่อนไหว ช่วยให้คุณทำงานกับสีได้โดยตรงในเบราว์เซอร์

เครื่องมือนี้ออกแบบมาสำหรับนักออกแบบ นักพัฒนา และครีเอเตอร์ที่ต้องการผลลัพธ์รวดเร็วและเชื่อถือได้

Supported formats

CSS

Keyframes

Tailwind

How it works

Step 1

เปิด ไล่ระดับสีเคลื่อนไหว

Step 2

ป้อนหรือนำเข้าสีของคุณ

Step 3

คัดลอก ส่งออก หรือใช้ผลลัพธ์ซ้ำ

ข้อผิดพลาดที่พบบ่อยที่ควรหลีกเลี่ยง

การลืมตรวจสอบคอนทราสต์อาจทำให้อ่านยากขึ้น
การใช้สีมากเกินไปอาจทำให้พาเลตนำไปใช้ยาก

เคล็ดลับจากมือโปร

เก็บสีหลักเป็นตัวแปร CSS
ทดสอบพาเลตในโหมดสว่างและมืดก่อนเผยแพร่

Privacy guaranteed: everything is processed locally in your browser.

เมื่อเป็นไปได้ การประมวลผลจะเกิดขึ้นภายในเบราว์เซอร์ ไม่ต้องมีบัญชี

ไล่ระดับสีเคลื่อนไหว สำหรับโปรเจกต์สีของคุณ

สร้างพื้นหลังไล่ระดับสีเคลื่อนไหวด้วย CSS

ไล่ระดับสีเคลื่อนไหว โดยไม่สูญเสียความแม่นยำ

การแปลงทำงานด้วยค่าที่แม่นยำ (HEX, RGB, HSL, OKLCH) ไม่มีการประมาณภาพ — คุณได้สีที่ตรงกับเจตนาการออกแบบ

ไล่ระดับสีเคลื่อนไหว ฟรีออนไลน์

ไม่ต้องลงทะเบียน ไม่ต้องดาวน์โหลดซอฟต์แวร์ ไล่ระดับสีเคลื่อนไหว ฟรี 100% และทำงานบนเบราว์เซอร์ใดก็ได้ แพ็กเกจฟรีรวม 10 ครั้งต่อวัน

ไล่ระดับสีเคลื่อนไหว รวดเร็วและปลอดภัย

การประมวลผลเกิดขึ้นในเบราว์เซอร์โดยตรงเพื่อความเร็วสูงสุด ไม่มีข้อมูลถูกส่งไปยังเซิร์ฟเวอร์ของเรา สีของคุณยังคงเป็นส่วนตัว

ไล่ระดับสีเคลื่อนไหว สำหรับการแชร์และทำงานร่วมกัน

ส่งออกผลลัพธ์เป็น HEX, RGB, HSL, CSS, JSON หรือคัดลอกได้ในคลิกเดียว เหมาะสำหรับแชร์คู่มือสีกับทีม

ค้นพบเครื่องมือสีทั้งหมด

สกัด แปลง สร้างพาเลต ไล่เฉดสี และคอนทราสต์ WCAG ในไม่กี่คลิก

ดูเครื่องมือทั้งหมด

Related tools

คู่มือและบทช่วยสอน

เรียนรู้วิธีการใช้งานเครื่องมือของเราด้วยคู่มือแบบละเอียด

animated-gradient: คู่มือใช้งาน gradients

คู่มือภาษาไทยสำหรับใช้ animated-gradient เข้าใจแนวทาง gradients และหลีกเลี่ยงข้อผิดพลาดทั่วไป

animated-gradient: คู่มือใช้งาน gradients

Frequently asked questions

ใช่ เครื่องมือนี้ใช้งานออนไลน์ได้ฟรี

เมื่อเป็นไปได้ การประมวลผลจะเกิดขึ้นในเบราว์เซอร์เพื่อปกป้องข้อมูลของคุณ

โฆษณา

เราใช้คุกกี้

ไล่ระดับสีเคลื่อนไหว

Preview

Settings

CSS Code

Supported formats

How it works

Step 1

Step 2

Step 3

ข้อผิดพลาดที่พบบ่อยที่ควรหลีกเลี่ยง

เคล็ดลับจากมือโปร

Privacy guaranteed: everything is processed locally in your browser.

ไล่ระดับสีเคลื่อนไหว สำหรับโปรเจกต์สีของคุณ

ไล่ระดับสีเคลื่อนไหว โดยไม่สูญเสียความแม่นยำ

ไล่ระดับสีเคลื่อนไหว ฟรีออนไลน์

ไล่ระดับสีเคลื่อนไหว รวดเร็วและปลอดภัย

ไล่ระดับสีเคลื่อนไหว สำหรับการแชร์และทำงานร่วมกัน

ค้นพบเครื่องมือสีทั้งหมด

Related tools

คู่มือและบทช่วยสอน

animated-gradient: คู่มือใช้งาน gradients

animated-gradient: คู่มือใช้งาน gradients

animated-gradient: คู่มือใช้งาน gradients

Frequently asked questions

ไล่ระดับสีเคลื่อนไหว ฟรีหรือไม่?

ข้อมูลของฉันถูกส่งไปยังเซิร์ฟเวอร์หรือไม่?