เมื่อใดที่ฉันควรใช้ conic gradient

Conic gradients เหมาะสำหรับเอฟเฟกต์กราฟวงกลม วงล้อสี และพื้นหลังหมุนนามธรรม กวาดรอบจุดศูนย์กลาง ซึ่งเป็นสิ่งที่ทั้ง linear และ radial gradients ทำไม่ได้ การรองรับเบราว์เซอร์ตอนนี้แข็งแกร่งในเอนจิ้นสมัยใหม่

ฉันจะหลีกเลี่ยงตรงกลางขุ่นใน gradients สองสีได้อย่างไร

เพิ่ม stop กลางที่มีสีสมดุลเชิงการรับรู้ หรือเลือกสีที่มี lightness คล้ายกัน การผสมสีเสริมผ่านจุดกึ่งกลาง RGB ผลิตสีเทา — การเลือกจุดกึ่งกลางด้วยมือใน OKLCH หลีกเลี่ยง

ส่งออกเป็นรูปแบบอื่นได้ไหม

เอาต์พุตเป็น CSS มาตรฐาน ซึ่งทำงานโดยตรงในบริบทเว็บใดๆ สำหรับเครื่องมือออกแบบ คัดลอก color stops แต่ละตัวและทำซ้ำ gradient ใน Figma หรือ Sketch

รองรับ transparency หรือไม่

ใช่ color stop ใดๆ สามารถมี alpha channel เป็นประโยชน์สำหรับการเลือนขอบเข้าพื้นหลังหรือการซ้อน gradients ด้วย stops กึ่งโปร่งใส

ข้อมูลของฉันถูกส่งไปที่ใดหรือไม่

ไม่ การสร้างทำงานในเบราว์เซอร์ของคุณทั้งหมด

ตัวสร้าง CSS Gradient — Linear, Radial

ตัวสร้าง CSS Gradient

ออกแบบเพื่อความเป็นส่วนตัว — ทำงานในเบราว์เซอร์ของคุณทั้งหมด

สร้าง CSS gradients แบบ linear และ radial ทางสายตา ในเบราว์เซอร์ของคุณ Toova ให้คุณวาง color stops ปรับมุม สลับชนิด และส่งออก CSS ที่พร้อมวาง — ทั้งหมดโดยไม่อัปโหลดอะไรไปยังเซิร์ฟเวอร์

Linear, radial และ conic gradients

Linear gradients เคลื่อนไปตามแกนตรงที่กำหนดโดยมุมหรือ direction keyword Radial gradients ขยายจากจุดศูนย์กลาง Conic gradients กวาดรอบมุม — เหมาะสำหรับพื้นหลังแบบกราฟวงกลมหรือเอฟเฟกต์วงล้อสี Toova เปิดเผยทั้งสามด้วยการควบคุมทางสายตา ดังนั้นคุณสามารถสร้าง gradient ที่คุณต้องการโดยไม่ต้องจำทุก variant ของไวยากรณ์ CSS

Color stops และ easing

ลาก color stops ตาม gradient bar เพื่อควบคุมว่าแต่ละสีเริ่มและสิ้นสุดที่ไหน เพิ่ม stops เท่าที่คุณต้องการ — Toova ไม่จำกัด ใช้ easing presets เพื่อแนะนำการ interpolation แบบไม่เชิงเส้น ซึ่งหลีกเลี่ยงตรงกลางสีเทาขุ่นที่เกาะกุม gradients สองสีธรรมดา เอาต์พุต CSS ใช้คุณสมบัติมาตรฐานที่รองรับในเบราว์เซอร์สมัยใหม่ทุกตัว

การสร้างเฉพาะเบราว์เซอร์

ทุก gradient สร้างในเครื่องในเบราว์เซอร์ของคุณ สีที่คุณเลือก stops ที่คุณวาง เอาต์พุต CSS — ไม่มีอะไรออกจากหน้า มากเกินไปสำหรับ gradients แต่หมายความว่าเครื่องมือเร็วและเชื่อถือได้ และหน้าทำงานออฟไลน์หลังจากโหลดครั้งแรก แท็บเครือข่ายจะว่างระหว่างการใช้งาน

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

เมื่อใดที่ฉันควรใช้ conic gradient: Conic gradients เหมาะสำหรับเอฟเฟกต์กราฟวงกลม วงล้อสี และพื้นหลังหมุนนามธรรม กวาดรอบจุดศูนย์กลาง ซึ่งเป็นสิ่งที่ทั้ง linear และ radial gradients ทำไม่ได้ การรองรับเบราว์เซอร์ตอนนี้แข็งแกร่งในเอนจิ้นสมัยใหม่
ฉันจะหลีกเลี่ยงตรงกลางขุ่นใน gradients สองสีได้อย่างไร: เพิ่ม stop กลางที่มีสีสมดุลเชิงการรับรู้ หรือเลือกสีที่มี lightness คล้ายกัน การผสมสีเสริมผ่านจุดกึ่งกลาง RGB ผลิตสีเทา — การเลือกจุดกึ่งกลางด้วยมือใน OKLCH หลีกเลี่ยง
ส่งออกเป็นรูปแบบอื่นได้ไหม: เอาต์พุตเป็น CSS มาตรฐาน ซึ่งทำงานโดยตรงในบริบทเว็บใดๆ สำหรับเครื่องมือออกแบบ คัดลอก color stops แต่ละตัวและทำซ้ำ gradient ใน Figma หรือ Sketch
รองรับ transparency หรือไม่: ใช่ color stop ใดๆ สามารถมี alpha channel เป็นประโยชน์สำหรับการเลือนขอบเข้าพื้นหลังหรือการซ้อน gradients ด้วย stops กึ่งโปร่งใส
ข้อมูลของฉันถูกส่งไปที่ใดหรือไม่: ไม่ การสร้างทำงานในเบราว์เซอร์ของคุณทั้งหมด