ตัวสร้าง CSS Gradient: สร้าง Linear และ Radial CSS
ตัวสร้าง CSS Gradient สร้าง background gradient ของ CSS จากสองสี เลือก gradient แบบเส้นตรงและตั้งมุมของมัน หรือเลือก gradient แบบรัศมี แล้วตรวจสอบพรีวิวสดขณะปรับตัวเลือก คัดลอกประกาศ CSS ที่ได้แล้ววางเข้าสไตล์ชีต เป็นวิธีรวดเร็วในการสร้างสไตล์ gradient โดยไม่ต้องเขียนค่าด้วยตนเอง
ตัวสร้าง CSS Gradient เป็นเครื่องมือในเบราว์เซอร์สำหรับสร้าง CSS gradients จากสองสี เลือก gradient แบบเส้นตรงพร้อมมุมหรือเลือกแบบรัศมี ตรวจสอบพรีวิวสด แล้วคัดลอกประกาศ background ที่ได้เข้าสไตล์ชีตของคุณ ให้วิธีตรงไปตรงมาในการสร้าง CSS gradients โดยไม่ต้องเขียนค่าด้วยตนเอง
ขั้นตอนการทำงานง่าย: ตั้งค่าสีและประเภท gradient แล้วปรับมุมเมื่อใช้ gradient แบบเส้นตรง พรีวิวอัปเดตเพื่อแสดง gradient ที่เลือก และเครื่องมือให้ประกาศ CSS ที่ได้เพื่อคัดลอก gradient แบบเส้นตรงและแบบรัศมีให้วิธีต่างกันในการเปลี่ยนระหว่างสี: แบบเส้นตรงตามทิศทาง ส่วนแบบรัศมีกระจายออกจากพื้นที่กลาง
ใช้ CSS gradient ที่สร้างเมื่อคุณต้องการการเปลี่ยนสีในสไตล์ชีตแทนค่าสีคงที่หรือประกาศที่เขียนด้วยตนเอง ตัวเลือกแบบเส้นตรงมีประโยชน์เมื่อทิศทางสำคัญ; ตัวเลือกแบบรัศมีให้รูปทรงต่างกันสำหรับการเปลี่ยน คุณยังใช้ค่าที่สร้างในการทดสอบ ฟิกซ์เจอร์ ข้อมูล seed หรือต้นแบบได้
ตัวสร้าง CSS Gradient ทำงานในเบราว์เซอร์ของคุณทั้งหมด ไม่มีอินพุตถูกอัปโหลด จัดเก็บ หรือส่งไปยังเซิร์ฟเวอร์ และเมื่อโหลดหน้าแล้วเครื่องมือใช้งานออฟไลน์ ใช้ฟรีและช่วยนักพัฒนาและวิศวกร DevOps ที่ต้องการสร้าง พรีวิว และคัดลอก CSS ของ gradient อย่างรวดเร็ว
ขั้นตอนที่ 1: เลือกสองสีสำหรับ gradient สีเหล่านี้ใช้สร้างค่า background ของ CSS
ขั้นตอนที่ 2: เลือก gradient แบบเส้นตรงหรือแบบรัศมี ถ้าเลือกแบบเส้นตรง ให้ตั้งมุมเพื่อควบคุมทิศทางของมัน
ขั้นตอนที่ 3: ตรวจสอบพรีวิวสดขณะปรับตัวเลือกของคุณ แสดงว่า gradient มีลักษณะอย่างไรก่อนคุณคัดลอก CSS
ขั้นตอนที่ 4: คัดลอกประกาศ background ของ CSS ที่ได้แล้ววางเข้าสไตล์ชีตของคุณ
กรณีการใช้งาน: สร้างค่า CSS gradient สำหรับการทดสอบ ฟิกซ์เจอร์ หรือข้อมูล seed เพื่อให้ตัวอย่างใช้สไตล์พร้อมวาง
กรณีการใช้งาน: สร้างชุดค่า gradient พร้อมกันแทนการคิดแต่ละค่าด้วยตนเอง
กรณีการใช้งาน: รับค่า gradient แบบสุ่มอย่างเหมาะสมแทนการพึ่งการเดาที่พิมพ์บนคีย์บอร์ด
กรณีการใช้งาน: ลองการจัดการแบบเส้นตรงและแบบรัศมีสำหรับอินเทอร์เฟซก่อนเพิ่ม CSS ที่เลือกเข้าสไตล์ชีต
กรณีการใช้งาน: เตรียมสไตล์ gradient สำหรับต้นแบบโดยเลือกสองสีและตรวจสอบพรีวิวสด
กรณีการใช้งาน: คัดลอกประกาศ gradient เพื่อใช้ในโปรเจกต์โดยไม่ต้องเขียนค่า CSS ด้วยตนเอง