Gradient

ตัวสร้าง CSS Gradient

สร้าง linear, radial และ conic gradient พร้อม stop ไม่จำกัด การ interpolate แบบรู้จัก OKLCH และเอาต์พุต utility ของ Tailwind v4 พรีวิวสด พรีเซ็ตกว่า 30 แบบ ทำงานในเบราว์เซอร์ของคุณ

Linear ผสมสีไปตามเส้นตรงตามมุมที่เลือก (0° = ขึ้น, 90° = ขวา) Radial ผสมสีจากจุดศูนย์กลางออกด้านนอก — รูปวงกลมหรือวงรี พร้อมคำขนาดอย่าง farthest-corner Conic หมุนรอบจุดศูนย์กลาง — color stop วางตามมุมเหมือนเข็มนาฬิกา Conic เหมาะกับกราฟวงกลม หน้าปัดต่าง ๆ และพื้นหลังแบบ color-wheel สังเคราะห์

เมื่อต้องเปลี่ยนระหว่าง hue ที่ไม่ใกล้เคียงกัน — เช่น น้ำเงิน → เหลือง หรือ แดง → เขียว การ interpolate แบบ sRGB เริ่มต้นจะผ่านจุดกึ่งกลางสีเทาขุ่น OKLCH (CSS Color Module 4 in oklch) ทำให้จุดกึ่งกลางยังสดใส เพราะ interpolate ในพื้นที่สีที่สม่ำเสมอเชิงการรับรู้ สำหรับ gradient สอง stop ที่ hue ใกล้กัน ความต่างจะน้อยมาก แต่สำหรับ gradient หลาย stop หรือช่วง hue กว้าง OKLCH ดีกว่าอย่างชัดเจน

Color stops
CSS
Tailwind v4
JSON
พรีเซ็ต

สร้างมาเพื่อ CSS gradient ระดับโปรดักชัน

Linear / radial / conic, ความนุ่มนวลแบบ OKLCH, รองรับ Tailwind — พร้อมรายละเอียดเล็ก ๆ น้อย ๆ ที่ทำให้ใช้งานสนุก

Gradient สามประเภท

Linear ปรับมุม 0-360°, radial เลือก circle/ellipse + ขนาด + ตำแหน่ง, conic ตั้ง from-angle + ตำแหน่ง ทุกประเภทสร้าง CSS ตามมาตรฐาน CSS Images Module Level 4

Color stop สูงสุด 12 จุด

เพิ่ม stop ที่เปอร์เซ็นต์ใดก็ได้ ลากแถบเลื่อนเพื่อปรับตำแหน่งแบบละเอียด คลิกที่ swatch เพื่อเลือกสีหรือวาง HEX Stop จะเรียงลำดับอัตโนมัติเมื่อสร้างเอาต์พุต คลิก × เพื่อลบ (อย่างน้อยต้องมี 2 stop)

การ interpolate แบบรู้จัก OKLCH

สลับระหว่าง sRGB ค่าเริ่มต้นกับการ interpolate แบบ in oklch สมัยใหม่ OKLCH ให้จุดกึ่งกลางที่นุ่มนวลเชิงการรับรู้ — ไม่มีแถบเทาขุ่นเมื่อข้ามค่า hue เบราว์เซอร์ที่ยังไม่รองรับ CSS Color 4 จะ fallback ได้อย่างราบรื่น

เอาต์พุต CSS, Tailwind v4 และ JSON

พาเนลเอาต์พุตสามช่องอัปเดตสด ๆ: CSS ดิบ (background-image: linear-gradient(...)), Tailwind v4 utility แบบ arbitrary-value (bg-[linear-gradient(...)]) และ snippet JSON design token พร้อมใช้งานกับ Style Dictionary หรือ Figma Tokens

พรีเซ็ตคัดสรรกว่า 30 แบบ

Sunset, Ocean, Aurora, Cyber, Royal, Neon Pink, Iris, Bullseye, Conic Wheel — คลิกเพื่อโหลดและปรับแต่ง ทุกพรีเซ็ตเป็นจุดเริ่มต้นคุณภาพระดับโปรดักชันจริง ไม่ใช่แค่ชื่อ

พรีวิวสด + ความเป็นส่วนตัวโดยการออกแบบ

พรีวิวเรนเดอร์ด้วย background-image เนทีฟ ดังนั้นสิ่งที่คุณเห็นคือสิ่งที่ stylesheet ของคุณจะให้ผล ทุกพิกเซลทำงานในเครื่อง — เปิด DevTools → Network แล้วยืนยันได้ว่าไม่มีรีเควสต์ออกเลย

วิธีสร้าง CSS gradient

สี่ขั้นตอนจากหน้าว่างสู่ CSS, Tailwind หรือ JSON พร้อมใช้งานในโปรดักชัน

  1. 1

    เลือกประเภท gradient

    Linear สำหรับพื้นหลัง เฮดเดอร์ และส่วน hero Radial สำหรับสปอตไลต์ vignette ปุ่มเรืองแสง Conic สำหรับกราฟวงกลม วงล้อสี และพื้นหลังสังเคราะห์ที่กำลังนิยม สลับระหว่างประเภทด้วยแท็บ — color stop ของคุณจะคงอยู่เมื่อสลับ

  2. 2

    วาง color stop

    คลิกที่ swatch สีเพื่อเปิด picker หรือวาง HEX ลงในช่องโดยตรง ลาก slider เพื่อกำหนดตำแหน่ง stop 0-100% คลิก + เพิ่ม stop เพื่อแทรก stop ใหม่ที่ช่องว่างใหญ่ที่สุด (พร้อมสีกึ่งกลาง) สูงสุด 12 stop

  3. 3

    ปรับเรขาคณิต + interpolation

    สำหรับ linear ตั้งมุม (0° ชี้ขึ้น 90° ขวา) สำหรับ radial เลือก shape, คำขนาด และตำแหน่งศูนย์กลาง สำหรับ conic ตั้งมุมเริ่มต้น สลับ การ interpolate สี เป็น OKLCH เพื่อจุดกึ่งกลางที่นุ่มนวลเชิงการรับรู้ใน gradient หลาย hue

  4. 4

    คัดลอกเอาต์พุต

    พาเนลสามช่องอัปเดตสด ๆ: CSS (background-image:...), Tailwind v4 (bg-[...]), JSON (รูปแบบ design token) ใช้ไอคอนคัดลอกของแต่ละช่อง หรือกด ดาวน์โหลด CSS เพื่อบันทึกไฟล์ gradient.css พร้อมนำไปวางในโปรเจกต์ของคุณ

สร้างมาเพื่อนักออกแบบ + นักพัฒนา

สี่สถานการณ์ที่พบบ่อยซึ่งเครื่องมือเบราว์เซอร์ที่เน้นความเป็นส่วนตัวดีกว่าการเปิด Figma + เว็บ gradient แยก

พื้นหลังส่วน hero ของหน้าการตลาด

เลือกพรีเซ็ตที่ใกล้เคียงกับแบรนด์ของคุณ ใส่สีแบรนด์สองสีลงใน stop เปลี่ยนเป็น OKLCH interpolation เพื่อจุดกึ่งกลางที่สะอาดตา คัดลอก CSS แล้ววางลงใน stylesheet ของ hero รวมเวลาทั้งสิ้น: น้อยกว่า 2 นาที

Gradient ปุ่มและการ์ดที่รับรู้แบรนด์

สร้าง gradient แบรนด์ 3 stop หนึ่งครั้ง คัดลอกเป็น JSON design token แล้ววางลงใน Style Dictionary / Figma Tokens จากนั้นทุกปุ่ม + การ์ดในทุกแพลตฟอร์มจะใช้ gradient เดียวกันโดยอ้างอิง อัปเดตที่เดียว ก็แพร่ไปทุกที่

พื้นหลัง conic สำหรับกราฟ + แดชบอร์ด

Conic gradient สังเคราะห์เหมาะมากกับภาพกราฟวงกลม หน้าปัดความคืบหน้า หรือเอฟเฟกต์ shimmer 'data-loading' เลือกประเภท conic ตั้ง from-angle ใส่ stop ที่เปอร์เซ็นต์ที่ถูกต้อง — คณิตศาสตร์จับคู่มุม 0-360° กับตำแหน่งเปอร์เซ็นต์ตรงกันเป๊ะ

พื้นหลังกำหนดเองสำหรับสไลด์ โพสต์โซเชียล และภาพ hero

สร้าง gradient ตั้งสัดส่วนภาพให้ตรงกับเป้าหมายของคุณ (16:9 สำหรับสไลด์, 1:1 สำหรับ IG, 3:1 สำหรับเฮดเดอร์ X) แล้วแคปหน้าจอพรีวิว หรือคัดลอก CSS ลงไฟล์ HTML เดี่ยว ๆ แล้วแคปจากเบราว์เซอร์ของคุณที่ขนาดพิกเซลที่ต้องการพอดี

ส่วนตัว 100% — ทำงานในเบราว์เซอร์ของคุณ

สีและ gradient ของคุณไม่เคยออกจากอุปกรณ์ เปิด DevTools → Network แล้วคุณจะเห็นว่าไม่มีรีเควสต์ออกเลยระหว่างการทำงานใด ๆ

  • การประกอบสตริง gradient, การ serialize CSS / Tailwind / JSON และพรีวิวสดทั้งหมดทำงานเป็น JavaScript บนเครื่องของคุณ — ไม่มีการเรนเดอร์ฝั่งเซิร์ฟเวอร์ ไม่มี API ของบุคคลที่สาม
  • พรีวิวใช้ background-image ของ CSS แบบเนทีฟ — ดังนั้น gradient ที่เรนเดอร์จึงตรงกับสิ่งที่ stylesheet ของคุณจะให้ผลในเบราว์เซอร์ของผู้ใช้พอดี
  • ไม่ต้องล็อกอิน ไม่มี telemetry บนค่าสี เราใช้คุกกี้เพียงตัวเดียวสำหรับสถานะคำยินยอมคุกกี้ และอีกตัวสำหรับการตั้งค่าภาษา

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

บทอ่านที่คัดสรรเกี่ยวกับ CSS gradient, OKLCH interpolation และระบบ design token

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

ความแตกต่างระหว่าง linear, radial และ conic คืออะไร?

Linear ผสมสีไปตามเส้นตรงตามมุมที่เลือก (0° = ขึ้น, 90° = ขวา) Radial ผสมสีจากจุดศูนย์กลางออกด้านนอก — รูปวงกลมหรือวงรี พร้อมคำขนาดอย่าง farthest-corner Conic หมุนรอบจุดศูนย์กลาง — color stop วางตามมุมเหมือนเข็มนาฬิกา Conic เหมาะกับกราฟวงกลม หน้าปัดต่าง ๆ และพื้นหลังแบบ color-wheel สังเคราะห์

ควรใช้ OKLCH interpolation เมื่อไร?

เมื่อต้องเปลี่ยนระหว่าง hue ที่ไม่ใกล้เคียงกัน — เช่น น้ำเงิน → เหลือง หรือ แดง → เขียว การ interpolate แบบ sRGB เริ่มต้นจะผ่านจุดกึ่งกลางสีเทาขุ่น OKLCH (CSS Color Module 4 in oklch) ทำให้จุดกึ่งกลางยังสดใส เพราะ interpolate ในพื้นที่สีที่สม่ำเสมอเชิงการรับรู้ สำหรับ gradient สอง stop ที่ hue ใกล้กัน ความต่างจะน้อยมาก แต่สำหรับ gradient หลาย stop หรือช่วง hue กว้าง OKLCH ดีกว่าอย่างชัดเจน

เอาต์พุต Tailwind v4 ให้อะไรกับฉัน?

Utility แบบ arbitrary-value ที่วางลงใน JSX / Blade / HTML ได้ทันที: bg-[linear-gradient(45deg,#ff6b6b_0%,#feca57_50%,#ff9ff3_100%)] ไม่ต้องแก้ tailwind.config.js ใช้งานได้กับโปรเจกต์ Tailwind 4 ใด ๆ ถ้าคุณชอบ token สีที่ตั้งชื่อ ให้คัดลอก CSS แทนแล้วแปลงเอง

Gradient จะใช้ได้กับเบราว์เซอร์รุ่นเก่าไหม?

Linear และ radial gradient รองรับครบทุกเบราว์เซอร์ตั้งแต่ปี 2014 Conic gradient รองรับในทุก evergreen browser ตั้งแต่ปี 2021 ส่วนคีย์เวิร์ด in oklch รองรับใน Chrome 111+, Safari 16.2+, Firefox 113+ ถ้าต้องรองรับเบราว์เซอร์เก่ากว่านั้น ให้ใช้ sRGB interpolation ค่าเริ่มต้น — ความต่างเชิงสายตามักสำคัญที่สุดเฉพาะกับ gradient หลาย stop ที่ข้าม hue

มีอะไรถูกส่งไปยังเซิร์ฟเวอร์ของคุณบ้าง?

ไม่มี การสร้างสตริง gradient, การ serialize CSS / Tailwind / JSON และพรีวิวสดทั้งหมดทำงานเป็น JavaScript บนอุปกรณ์ของคุณ เปิด DevTools → Network แล้วคุณจะเห็นว่าไม่มีรีเควสต์ออกเลยระหว่างการทำงานใด ๆ วางสีของแบรนด์หรือ token ภายใน — ไม่มีอะไรหลุดออกจากแล็ปท็อปของคุณ