Utiliome

ตัวสร้าง CSS Gradient

สร้างและปรับแต่ง CSS Gradient แบบ Linear, Radial และ Conic ได้อย่างง่ายดาย คัดลอก โค้ด CSS ที่รองรับทุกเบราว์เซอร์ทันที ฟรี 100%

Settings

135°
0%
100%
Standard CSS
background: #8B5CF6; background: linear-gradient(135deg, #8B5CF6 0%, #EC4899 100%);
Tailwind CSS (v3/v4 Arbitrary)
bg-[linear-gradient(135deg,_#8B5CF6_0%,_#EC4899_100%)]

เครื่องมือที่เกี่ยวข้อง

เครื่องมือที่คุณอาจต้องใช้เพิ่มเติม

เครื่องมือสร้างจานสี Palette Generator

สร้าง ปรับแต่ง และส่งออกชุดสีสวยๆ รวมถึงสีไล่ระดับสำหรับงาน UI ของคุณ

เครื่องมือสร้างเอฟเฟกต์ Glassmorphism

สร้างเอฟเฟกต์ UI กระจกฝ้าสุดทันสมัย ปรับความเบลอ ความใส พร้อมโค้ด CSS

สกัดจานสีจากรูปภาพ ออนไลน์

อัปโหลดรูปภาพเพื่อดูและสกัดชุดโทนสีในรูปออกเป็นจานสีได้ทันที

สกัดสีหลักออกจากรูปภาพ

อัปโหลดรูปภาพเพื่อสกัดและค้นหาโทนสีหลักที่โดดเด่นที่สุดในภาพทันที

เครื่องมือสร้าง Favicon

สร้าง Favicon ความละเอียดสูงสำหรับเว็บไซต์ของคุณได้ง่ายๆ

เครื่องมือสร้างไฟล์ ICO

แปลงรูปภาพเป็นไฟล์ ICO สำหรับไอคอน Windows และ Favicon

ส่วนตัว 100% • ไม่อัปโหลดไฟล์ขึ้นเซิร์ฟเวอร์

ทำไมต้องใช้ ตัวสร้าง CSS Gradient ฟรีของ Utiliome?

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

ผืนผ้าใบสร้าง Gradient แบบแสดงผลทันที

เพิ่ม ลบ และลากจุดหยุดสีบนไทม์ไลน์เพื่อผสมผสานการไล่เฉดหลายสีได้อย่างสมบูรณ์แบบ

รองรับ Gradient หลากหลายรูปแบบ

สลับโหมด CSS Gradient ระหว่าง Linear (ตามทิศทาง), Radial (วงกลม) และ Conic (มุนรอบจุด) ได้อย่างไร้รอยต่อ

ส่งออก CSS ทันที

สร้างโค้ด CSS ที่รองรับทุกเบราว์เซอร์โดยอัตโนมัติ รวมถึง Vendor Prefix เพื่อการรองรับที่สมบูรณ์ที่สุด

ประมวลผลบนเครื่อง 100%

สร้างด้วย JavaScript ฝั่งไคลเอนต์ทั้งหมด ไม่มีความล่าช้าจากเซิร์ฟเวอร์ ไม่ต้องรอ ได้รับการตอบสนองทางทัศนศิลป์ทันที

Utiliome เปรียบเทียบกับทางเลือกคลาวด์แบบเดิม

เปรียบเทียบขีดความสามารถของเอนจิน WebAssembly ภายในเครื่อง กับเครื่องมือคลาวด์แบบเก่า

ฟีเจอร์ Utiliome (ประมวลผลในเบราว์เซอร์) เครื่องมือแปลงไฟล์บนคลาวด์แบบเดิม
ประเภท Gradient Linear, Radial, Conic โดยทั่วไปมีเฉพาะ Linear
ผลลัพธ์โค้ด Vanilla CSS & Tailwind classes มีเฉพาะ CSS พื้นฐาน
ประสิทธิภาพ HTML5 Canvas ความหน่งเป็นศูนย์ เรนเดอร์ DOM ช้า
ค่าใช้จ่าย ฟรี 100% ตลอดไป ฟีเจอร์พรีเมียมล็อกไว้หลังระบบชำระเงิน

วิธีใช้งาน ตัวสร้าง CSS Gradient ใน 3 ขั้นตอนง่ายๆ

ไม่ต้องติดตั้งโปรแกรม ทุกอย่างทำงานได้โดยตรงผ่านเว็บเบราว์เซอร์ของคุณ

1

เลือกสี

คลิกที่จุดหยุดสีบนไทม์ไลน์เพื่อเล—อกรหัส HEX เริ่มต้นและสิ้นสุดของคุณ

2

ปรับทิศทาง

ใช้ปุ่มหมุนมุมเพื่อหมุน Linear Gradient หรือสลับเป็นโหมด Radial เพื่อสร้างเอฟเฟกต์พุ่งอกจากศูนย์กลาง

3

คัดลอก CSS

คลิกปุ่มคัดลอกเพื่รับโค้ด CSS 'background-image' ที่จัดรูปแบบเรียบร้อยไปใส่ใน Stylesheet ของคุณ

ทำไมต้องใช้ CSS Gradient แทนรูปภาพพื้นหลัง?

คำตอบโดยย่อ: CSS Gradient ถูกคำนวณท—งคณิตศาสตร์โดยเบราว์เซอร์ ซึ่งหมายความว่าไม่ต้องส่งคำขอเครือข่าย HTTP ขยายขนาดได้สมบูรณ์แบบโดยไม่แตกบนหน้าจอ Retina และมีขนาดไฟล์เพียงไม่—ี่ไบต์ของข้อความ

เมื่อทศวรรษที่แล้ว นักออกแบบเว็บจะสร้างพ้นหลังแบบไล่เฉดสีใน Photoshop ตัดแบ่งเป็นไฟล์รูปภาพ JPG ขนาดใหญ่ และตั้งค่าเป็นรูปแบบพื้นหลังซ้ำๆ ซึ่งส่งผลเสียต่อ SEO ทำให้หน้าเว็บโหลดช้าลงอย่างมาก และดูแตกเป็นพิกเซลบนจอภาพ 4K สมัยใหม่

เบราว์เซอร์สมัยใหม่ได้ำเสนอฟังก์ชัน linear-gradient() ของ CSS เนื่องจากฟังก์ชันนี้เป็นคำสั่งทางคณิตศาสตร์มากกว่าจะเป็นภาพนิ่ง GPU ของเบราว์เซอร์จึงเรนเดอร์การผสมสีได้แบเรียลไทม์ การใช้ตัวสร้างของ Utiliome ช่วยให้คุณสร้าง Gradient ที่ซับซ้อนและมีหลายจุดหุดสี ซึ่งโหลดได้ทันทีและปรับเปลี่ยนแบบไดนามิกตามความกว้างของหน้าจอมือถือหรือเดสก์ท็อปของผู้ใช้

ข้อแตกต่างระหว่าง Linear, Radial และ Conic Gradient

คำตอบโดยย่อ: Linear Gradient ผสมสีตามแนวเส้นตรง (เช่น จากบนลงล่าง) Radial Gradient แ่ออกด้านนอกจากจุดศูนย์กลางแบบวงกลม Conic Gradient กวาดสีรอบแกนกลางเหมือนแผนภูมวงกลมหรือวงล้อสี

การเข้าใจประเภทหลักทั้งสามของ CSS Gradient ช่—ยเพิ่มความยืดหยุ่นในการสร้างสรรค์ได้อย่างมหาศาล:

  • Linear Gradients: ประเภทที่พบบ่อยที่สุด คุณกำหนดมุม (เช่น 45deg หรือ to right bottom) และสีจะเปลี่ยนผ่านอย่างราบรื่นตามแกนนั้น
  • Radial Gradients: สร้างเอฟเฟกต์กระจายแบบวงกลมหรือวงรี เหมาะสำหรับการไฮไลต์องค—ประกอบหลักบนหน้าเว็บหรือสร้างการแรเงาทรงกลม 3D ที่สมจริง
  • Conic Gradients: สิ่งใหม่ล่าสุดในข้อกำหนด CSS แทนที่จะเปลี่ยนผ่านออกด้านนอก ส—จะเปลี่ยนผ่านรอบจุดศูนย์กลาง (0 ถึง 360 องศา) มีประโยชน์อย่างยิ่งสำหรับการสร้างแผนภูมิวงกลมด้วย CSS เพียวๆ และแอนิเมชันการโหลดแบบหมุน

ความเข้าใจเกี่ยวกับ Color Stop ใน CSS

คำตอบโดยย่อ: Color Stop กำหนดตำหน่งที่แน่นอนบนเส้น Gradient ที่สีเฉพาะเจาะจงจะเข้าสู่ความเข้มสูงสุด กรเพิ่ม Color Stop หลายจุด (เช่น สีแดง 0%, สีเหลือง 50%, สีน้ำเงิน 100%) ช่วยให้คุสร้างพื้นหลังที่มีหลายแถบสีซับซ้อนได้

Gradient พื้นฐานต้องกรเพียงสองสี ได้แก่ จุดเริ่มต้นและจุดสิ้นสุด แต่นวัตกรรมของ Utiliome ช่วยให้คุณเพิ่ม Color Stop บนไทม์ไลน์ได้อย่างไม่จำกัด

ตัวอย่างเช่น หากคุณเขีน linear-gradient(to right, red 0%, green 50%, blue 100%) เบราว์เซอร์จะเปลี่ยนจากสีแดงเป็นสีเขียวอย่าราบรื่น ณ จุดครึ่งหนึ่งของหน้าจอ แล้วจึงเปลี่ยนจากสีเขียวเป็นีน้ำเงินในตอนท้าย

คุณยังสามารถสร้าง "Hard Stop" (เส้นคมชัดแทนการผสมสีแบบราบรื่น) ได้โดยการกำหนดสองสีที่แตกต่างกันให้กับเปอร์เซ็นตเดียวกันเป๊ะๆ (เช่น red 50%, blue 50%) เทคนิคนี้เป็นวิธีที่นักพัฒนาใช้สร้างลวลายริ้วและธงชาติด้วย CSS เพียวๆ

วิธีสร้าง Text Gradient ด้วย CSS

คำตอบโดยย่อ: คุณสามารถปรับใช้ Gradient กับข้อความโดยตรงโดยใช้คุณสมบัติ 'background-clip: text' และ '-webkit-text-fill-color: transparent' เพื่อคลิปพื้นหลัง Gradient ให้เข้ากับรูปทรงของฟอนต์โดยเฉพาะ

หนึ่งในเทรนด์การออกแบบเว็บสมัยใหม่ที่ได้รบความนิยมมากที่สุดคือการใช้ Gradient สดใสกับข้อความขนาดใหญ่ ซึ่งมักใช้นส่วนหัว H1 hero (ได้รับความนิยมจาก Apple และ Stripe)

ในการทำเช่นนี้ คุณสร้าง Gradient มาตรฐานด้วย Utiliome แต่นำไปใช้ด้วยกฎ CSS เฉพาะสามข้อ:

  1. ปรับใช้ Gradient กับองค์ประกอบ: background-image: linear-gradient(...);
  2. คลิปพื้นหลังเข้ากับข้อความ: -webkit-background-clip: text; background-clip: text;
  3. ทำให้ฟอนต์จริงโปร่งใสเพื่อให้พื้นหลังแสดงผ่าน: -webkit-text-fill-color: transparent;

สิ่งนี้ช่วยให้มั่นใจได้ว่าข้อความของคุณยังคงเลือกได้ทั้งหมดและดีต่อ SEO ในขณะที่ดูโดดเด่นสะดุดตา

ความเข้ากันได้ขามเบราว์เซอร์และ Vendor Prefixes

คำตอบโดยย่อ: แม้ว่าเบราว์เซอร์สมัยใหม่จะรองรับ Gradient โดยตรง แต่เบราว์เซอร์รุ่นเก่า (เช่น Safari และ Internet Explorer เวอร์ชันเก่า) ต้อ—ใช้ Vendor Prefix เฉพาะ '-webkit-' และ '-moz-' เพื่อประมวลผล CSS ให้ถูกต้อง

ในอด—ต การเขียน CSS Gradient เป็นเรื่องยากเนื่องจากไวยากรณ์มีการเปลี่ย—แปลงหลายครั้ง นักพัฒนาต้องเขียนโค้ดห้าบรรทัดที่แตกต่างกันเพื่อให้ Gradient แสดงผลได้บน Firefox, Safari และ Chrome

ในปัจจุบัน ไวยากรณ์มาตรฐาน linear-gradient() ได้รับการยอมรับอย่างแพร่หลาย อย่างไรก็ตาม เพื่อให้มั่นใจในความปลอดภัยสูงสุดสำหรับแอปพลิเคชันระดับองค์กรที่รองรับอุปกรณ์เคลื่อนที่รุ่นเก่า ตัวสร้างของ Utiliome สามารถแทรกฟอลแบ็ก Prefix -webkit- ที่จำเป็นลงในโค้ดที่คุณส่งออกได้โดยอัตโนมัติ

การสร้าง คลาส Tailwind CSS Gradient

คำตอบโดยย่อ: Tailwind CSS มีคลาสยูทิลิตีในตัวสำหรับ Gradient (เช่น 'bg-gradient-to-r from-cyan-500 to-blue-500') Utiliome ช่วยให้คุณออกแบบ Gradient แบบเห็นภาพและส่งออกเป็นสตริงคลาส Tailwind ได้ทันที

หากคุณกำลังพัฒนาแอปพลเคชัน React หรือ Next.js โดยใช้ Tailwind CSS การเขียนแอตทริบิวต์ style แบบกำหนดเองดวย Vanilla CSS จะขัดขวางเวิร์กโฟลว์แบบ Utility-first ของคุณ

Utiliome ช่วยก้าข้ามข้อจำกัดนี้ เมื่อคุณปรับแต่ง Gradient บนผืนผ้าใบเสร็จแล้ว เพียงลือกตัวเลือกส่งออก Tailwind ระบบจะแปลงรหัสสี HEX แบบกำหนดเองของคุเป็นค่า Tailwind Arbitrary (เช่น from-[#ff0000] via-[#00ff00] to-[#0000ff]) ช่วยให้คุณได้สตริงคลาสี่จัดรูปแบบเรียบร้อยสำหรับวางลงในส่วนประกอบ JSX ได้โดยรง

คำถามที่พบบ่อยและคู่มือทางเทคนิค ตัวสร้าง CSS Gradient

รวมทุกสิ่งที่คุณควรรู้เกี่ยวกับการใช้งาน ตัวสร้าง css gradient ออนไลน์ฟรี ออนไลน์ฟรีของ Utiliome

ฉันจะสร้างเอฟเฟกต์ข้อความ Gradient ใน CSS ได้อย่างร?

สร้าง Gradient ของคุณ จากนั้นเพิ่มคุณสมบัติ CSS: 'background-clip: text;' แล '-webkit-text-fill-color: transparent;' เพื่อคลิป Gradient ให้เข้ากับฟอนต์ของคุณ

Conic Gradient คืออะไร?

Conic Gradient คือการกวาดสีรอบแกนกลาง (เหมือนเรดาร์หรือแผนภูมิวงกลม) แทนที่จะเปลี่ยนผ่านในเส้นตรง

ฉันสามารถส่งออก Gradient ของฉันไปยัง Tailwind CSS ได้หรือไม่?

ได้ ตัวส่งออกของ Utiliome มีแท็บ Tailwind ที่สร้างคลาสยูทิลิตีที่แม่นยำ (เช่น bg-gradient-to-r from-red-500) ที่จำเป็นสำหรับโปรเจกต์ React/Next.js ของคุณ

CSS Gradient ส่งผลเสียต่อประสทธิภาพของเว็บไซต์หรือไม่?

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

ตัวสร้าง CSS นี้ใ—้งานได้ฟรีทั้งหมดหรือไม่?

ใช่ ฟรี 100% โดยไม่มีข้อจำกัด ไม่มโฆษณา และไม่ต้องลงทะเบียนบัญชี