Ultimate CSS Gradient Generator

ตัวแก้ไข CSS gradient ที่มีความสามารถเหมือน Photoshop

พรีเซ็ต
ชื่อ:
หยุด
ความทึบแสง:
ตำแหน่ง: %
สี:
ตำแหน่ง: %
ผู้สนับสนุน
ดูตัวอย่าง
การวางแนว: ขนาด: x IE
CSS
background: linear-gradient(); /* W3C, IE10+, FF16+, Chrome 26+, Opera 12+, Safari 7+ */
คัดลอก
รูปแบบสี:

ความเข้ากันได้ของเบราว์เซอร์

IE Edge Firefox Chrome Safari Opera iOS Safari เบราว์เซอร์ Android Chrome สำหรับ Android
6 - 8
รองรับบางส่วนโดยใช้ไวยากรณ์ filter การใช้เบราว์เซอร์: 0.03%
4 - 9
รองรับโดยใช้ไวยากรณ์ -webkit- แบบเก่า
การใช้เบราว์เซอร์: 0%
เลือก "เพิ่มความเข้ากันได้สูงสุด" เพื่อรองรับ
4 - 5
รองรับโดยใช้ไวยากรณ์ -webkit- แบบเก่า
การใช้เบราว์เซอร์: 0.01%
เลือก "เพิ่มความเข้ากันได้สูงสุด" เพื่อรองรับ
3.2 - 4.3
รองรับโดยใช้ไวยากรณ์ -webkit- แบบเก่า
การใช้เบราว์เซอร์: 0%
เลือก "เพิ่มความเข้ากันได้สูงสุด" เพื่อรองรับ
2.1 - 3
รองรับโดยใช้ไวยากรณ์ -webkit- แบบเก่า
การใช้เบราว์เซอร์: 0.01%
เลือก "เพิ่มความเข้ากันได้สูงสุด" เพื่อรองรับ
9
รองรับบางส่วนโดยใช้ไวยากรณ์ filter
รองรับเต็มรูปแบบโดยใช้ SVG (เลือก "IE9 support")
การใช้เบราว์เซอร์: 0.05%
เลือก "เพิ่มความเข้ากันได้สูงสุด" เพื่อรองรับ
3.6 - 15
รองรับโดยใช้คำนำหน้า -moz-
การใช้เบราว์เซอร์: 0.01%
เลือก "เพิ่มความเข้ากันได้สูงสุด" เพื่อรองรับ
10 - 25
รองรับโดยใช้คำนำหน้า -webkit-
การใช้เบราว์เซอร์: 0%
เลือก "เพิ่มความเข้ากันได้สูงสุด" เพื่อรองรับ
5.1 - 6
รองรับโดยใช้คำนำหน้า -webkit-
การใช้เบราว์เซอร์: 0.01%
เลือก "เพิ่มความเข้ากันได้สูงสุด" เพื่อรองรับ
11.1 - 11.5
รองรับโดยใช้คำนำหน้า -o-
การใช้เบราว์เซอร์: 0%
เลือก "เพิ่มความเข้ากันได้สูงสุด" เพื่อรองรับ
5.1 - 6.1
รองรับโดยใช้คำนำหน้า -webkit-
การใช้เบราว์เซอร์: 0%
เลือก "เพิ่มความเข้ากันได้สูงสุด" เพื่อรองรับ
4 - 4.3
รองรับโดยใช้คำนำหน้า -webkit-
การใช้เบราว์เซอร์: 0.09%
เลือก "เพิ่มความเข้ากันได้สูงสุด" เพื่อรองรับ
10+
รองรับเต็มรูปแบบ (ไม่มีคำนำหน้า)
12+
รองรับเต็มรูปแบบ (ไม่มีคำนำหน้า)
16+
รองรับเต็มรูปแบบ (ไม่มีคำนำหน้า)
26+
รองรับเต็มรูปแบบ (ไม่มีคำนำหน้า)
6.1+
รองรับเต็มรูปแบบ (ไม่มีคำนำหน้า)
12+
รองรับเต็มรูปแบบ (ไม่มีคำนำหน้า)
7.1+
รองรับเต็มรูปแบบ (ไม่มีคำนำหน้า)
4.4+
รองรับเต็มรูปแบบ (ไม่มีคำนำหน้า)
46+
รองรับเต็มรูปแบบ (ไม่มีคำนำหน้า)

(?)

ลิงก์ไปยังเอกสารสำหรับการไล่สีของ CSS: W3C, Firefox, Safari, Chrome (Webkit), Internet Explorer, Opera [2].

มีอะไรใหม่

แสดงเพิ่มเติม... แสดงน้อยลง...

เกี่ยวกับ

Ultimate CSS Gradient Editor ถูกสร้างขึ้นโดย Alex Sirota. หากคุณชอบเครื่องมือนี้, ลองดู ColorZilla สำหรับเครื่องมือที่ขั้นสูงขึ้น เช่น eyedroppers, color pickers, palette editors และ website analyzers.

ดังที่คุณอาจรู้, HTML5 ได้นำเสนอคุณสมบัติที่น่าตื่นเต้นสำหรับนักพัฒนาเว็บ หนึ่งในคุณสมบัติคือความสามารถในการระบุ gradients โดยใช้ CSS3 อย่างเดียว, โดยไม่ต้องสร้างภาพใด ๆ และใช้พวกเขาเป็นพื้นหลังที่ซ้ำกันสำหรับเอฟเฟกต์ gradient.

สำคัญ: คุณจะต้องใช้เวอร์ชันล่าสุดของ Firefox, Chrome, Safari, Opera หรือ IE เพื่อใช้ Gradient Generator นี้ การสร้าง CSS gradients ที่ได้จะทำงานได้ในเบราว์เซอร์เหล่านี้และยังจะสามารถย้อนกลับไปยัง gradient ที่ง่ายขึ้นในเวอร์ชันเก่า ๆ ของ Internet Explorer.

คุณสมบัติ

วิธีใช้

ตัวควบคุม gradient หลักช่วยให้คุณสามารถทำได้ดังนี้:

คุณสามารถใช้แผง 'Stops' เพื่อควบคุมสีและตำแหน่งของ stop ที่เลือกอยู่ในขณะนี้อย่างแม่นยำ

แผง 'Preview' ช่วยให้คุณสามารถดูตัวอย่าง gradient ปัจจุบันในรูปแบบแนวตั้งหรือแนวนอน และยังช่วยให้คุณสามารถดูตัวอย่างได้รวดเร็วว่า gradient ที่เป็น fallback สำหรับ Internet Explorer จะดูอย่างไรใน IE

สุดท้าย, แผง 'CSS' มี CSS สำหรับ gradient ปัจจุบันเสมอเพื่อความสะดวกในการคัดลอกและวางลงใน stylesheet ของคุณ คุณยังสามารถใช้แผงนี้เพื่อนำเข้า CSS gradient ที่มีอยู่แล้วลงในเครื่องมือ

เครดิต

gradient presets 'Ultimate Web 2.0 Gradients' ได้รับการสืบเนื่องมาจากงานของ deziner folio และ SGlider12.

Color Picker เป็นการปรับเปลี่ยนเล็กน้อยจาก John Dyer's Color Picker.

ฟังก์ชัน encoder Base-64 มาจาก webtoolkit.

บางไอคอนโดย Yusuke Kamiyamane.

Tags: CSS Gradient Editor, CSS Gradient Generator, HTML5 Gradient Generator, CSS3 Gradient Generator, CSS Gradient Maker, CSS Gradient Creator, Linear Gradients, Radial Gradients, IE6, IE7, IE8, IE9, IE10, SVG Gradients, ColorZilla CSS Gradient Editor, CSS Gradient Generator, HTML5 Gradient Generator, CSS3 Gradient Generator, CSS Gradient Maker, CSS Gradient Creator, Linear Gradients, Radial Gradients, SVG Gradients