Handytool
สำหรับนักพัฒนาฟรีทำงานในเครื่อง

CSS gradient generator

สร้าง linear, radial และ conic CSS gradient — ลาก stop, เลือกสี, copy CSS

ตัวอย่าง
CSS
background: linear-gradient(135deg, #B7FF3E 0%, #0a0a0a 100%);
ประเภท
Presets

เพิ่มสีได้ถึง 6 จุด ลากตัวเลื่อนตำแหน่ง แล้วคัดลอก CSS

เกี่ยวกับ CSS gradient generator

CSS gradient generator ของ Handytool สร้าง linear, radial และ conic gradient ด้วย color stop ได้ถึงหกตัว ลาก stop's position, เปลี่ยน color ของมัน, สลับ gradient type และ live preview และ CSS declaration อัปเดตทันที เริ่มจาก built-in preset หนึ่ง — Lime Swiss, Sunset, Sky, Aurora — หรือออกแบบของคุณเองจาก scratch

คุณสมบัติของ CSS gradient generator

  • 01

    Linear, radial และ conic

    Linear เป็น everyday background gradient; radial ยอดเยี่ยมสำหรับ highlight และ vignette; conic perfect สำหรับ pie chart, color wheel และ rotating background

  • 02

    Color stop ได้ถึงหกตัว

    เพิ่มและลบ stop, ตั้ง position ของแต่ละตัวด้วย slider และ pick color ผ่าน system color picker หรือ hex value Stop re-sort โดย position โดยอัตโนมัติ

  • 03

    Copyable CSS declaration

    Output เป็น complete background: ... declaration ที่คุณสามารถ paste ลงใน stylesheet, styled component หรือ Tailwind arbitrary-value class

คำถามที่พบบ่อยของ CSS gradient generator

ความแตกต่างระหว่าง linear, radial และ conic คืออะไร?
Linear gradient ทำงานใน straight line ที่มุมที่กำหนด; radial gradient ระบาย outward จาก center; conic gradient sweep รอบจุดเหมือน clock hand แต่ละอันเหมาะกับ visual effect ที่แตกต่างกัน
ฉันควรใช้ color stop กี่ตัว?
Two stop คือ classic two-color gradient Three หรือ four ให้คุณสร้าง realistic transition (sunset, aurora) มากกว่าหก tends ดูเหมือน noisy — นั่นคือ why generator นี้ cap ที่หก
ฉันสามารถใช้สิ่งนี้สำหรับ background ใน email template?
Email client ส่วนใหญ่ยัง ไม่รองรับ modern CSS gradient reliably — provide solid fallback color นอกเหนือจาก background gradient หาก copy นี้ลงใน email template
Output pixel-accurate หรือไม่?
ใช่ — preview ถูก render โดย browser's native gradient engine ดังนั้นสิ่งที่คุณเห็นคือสิ่งที่ CSS ของคุณจะ produce

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

สำหรับนักพัฒนา →

สำรวจเครื่องมืออื่น ๆ

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