วิธีใช้งาน ตัวสร้าง CSS gradient และเงา
- 1
เลือกการไล่สีหรือเงากล่อง
สลับระหว่างตัวแก้ไขทั้งสองด้วยแท็บเหนือตัวอย่าง
- 2
เริ่มจากค่าที่ตั้งไว้ล่วงหน้า
คลิกที่กรอบค่าที่ตั้งไว้ล่วงหน้าเพื่อโหลด หรือใช้ค่าเริ่มต้นแล้วปรับต่อจากนั้น
- 3
ปรับแบบเห็นภาพ
ลากจุดสีและตั้งมุม หรือเพิ่มเลเยอร์เงาแล้วปรับระยะเยื้อง ความเบลอ และการกระจาย
- 4
คัดลอกโค้ด
คัดลอกโค้ด CSS หรือคลาส Tailwind แล้ววางลงในโปรเจกต์ของคุณ
ข้อจำกัดและ Pro
ใช้ฟรีโดยไม่ต้องสมัครสมาชิก: จุดสีและเลเยอร์เงาไม่จำกัด การไล่สี 3 ประเภท พื้นที่สำหรับการผสมสี 3 แบบ และค่าที่ตั้งไว้ล่วงหน้า 24 แบบ
Pro ช่วยลบโฆษณา ตัวแก้ไขทั้งสองใช้งานได้ครบทุกแผน ดู Pro
เกี่ยวกับ ตัวสร้าง CSS gradient และเงา
การไล่สีและเงาเป็นเอฟเฟกต์ CSS สองอย่างที่มักต้องลองปรับไปเรื่อย ๆ ในเครื่องมือนักพัฒนาของเบราว์เซอร์ ตัวสร้างนี้มีตัวแก้ไขแบบภาพสำหรับทั้งสองอย่าง พร้อมตัวอย่างสดขนาดใหญ่ จากนั้นเขียนโค้ด CSS ที่ถูกต้องและคลาส Tailwind แบบ arbitrary value ที่ตรงกัน เช่น bg-[linear-gradient(135deg,#ff7e5f_0%,#feb47b_100%)] ให้คุณวางลงในสไตล์ชีตหรือ className ได้ทันที
ตัวแก้ไขการไล่สีสร้างได้ทั้งแบบเชิงเส้น แบบวงกลม และแบบกรวย คลิกที่แถบจุดสีเพื่อเพิ่มสีตรงตำแหน่งที่คลิก ลากจุดสีเพื่อย้าย หรือใช้ปุ่มลูกศรเพื่อกำหนดตำแหน่งอย่างละเอียด และกำหนดความโปร่งใสของแต่ละจุดได้ แบบเชิงเส้นและแบบกรวยกำหนดมุมได้ แบบวงกลมและแบบกรวยกำหนดจุดศูนย์กลางได้ แบบวงกลมเลือกรูปทรงเป็นวงกลมหรือวงรีได้ และทุกแบบเปิดโหมดทำซ้ำเพื่อทำลายทางและวงแหวนได้ นอกจากนี้ยังเลือกพื้นที่สีสำหรับการผสมสีได้ OKLab และ OKLCH ช่วยหลีกเลี่ยงแถบสีเทาขุ่นตรงกลางที่การผสมแบบ sRGB ดั้งเดิมมักสร้างระหว่างสีสด และเบราว์เซอร์รุ่นปัจจุบันทั้งหมดรองรับ
ตัวแก้ไขเงากล่องซ้อนเลเยอร์ได้ตามต้องการ แต่ละเลเยอร์มีระยะเยื้อง X และ Y ความเบลอ การกระจาย สีพร้อมความโปร่งใส สวิตช์ด้านใน และปุ่มสลับการแสดงผล และจัดลำดับเลเยอร์ใหม่ได้ เพราะเลเยอร์แรกจะถูกวาดอยู่ด้านบนสุด กล่องตัวอย่างที่ปรับขนาด รัศมีมุม และสีได้จะแสดงผลบนพื้นหลังสว่างหรือมืด
ค่าที่ตั้งไว้ล่วงหน้าอย่างละ 12 แบบสำหรับแต่ละตัวแก้ไข ทั้งพระอาทิตย์ตก วงล้อสี และลายทาง รวมถึงระดับความสูงแบบ Material เงานุ่มนวลซ้อนหลายชั้น นูโมฟิซึม และเงาคมเยื้อง เป็นจุดเริ่มต้นให้คุณ เครื่องมือนี้สร้างเฉพาะการไล่สีและเงากล่องเท่านั้น ไม่สร้าง text-shadow, filter: drop-shadow และการไล่สีของ SVG
ความเป็นส่วนตัว
ทุกอย่างทำงานในหน้าเว็บ สีและการตั้งค่าไม่ออกจากเบราว์เซอร์ของคุณ และไม่มีการอัปโหลดรูปภาพ การไล่สีและเงาปัจจุบันจะถูกบันทึกไว้ใน local storage จึงยังอยู่เมื่อคุณกลับมาใช้อีกครั้ง
คุณสมบัติ
เชิงเส้น แบบวงกลม และแบบกรวย
จุดสีที่ลากได้พร้อมความโปร่งใส มุม จุดศูนย์กลาง รูปทรง และโหมดทำซ้ำ
เงาหลายเลเยอร์
ซ้อน จัดลำดับ ซ่อน และตั้งเป็นด้านในได้ เพื่อให้ได้ความลึกที่สมจริง
CSS และ Tailwind
คัดลอกโค้ดที่พร้อมใช้หรือคลาส Tailwind แบบ arbitrary value