Ultimate CSS Gradient Generator

Preset

Nama:

warna/jenuh balik impor css impor gambar

Stops

Opasitas:		Lokasi:	%
Warna:		Lokasi:	%

Sponsor

Pratinjau

Orientasi: Ukuran: x IE

CSS

beralih ke sass

background: linear-gradient(); /* W3C, IE10+, FF16+, Chrome 26+, Opera 12+, Safari 7+ */

salin

Format warna: Komentar

Tautan untuk, simpan atau bagikan gradien saat ini menggunakan permalink.

Kesesuaian browser

IE	Edge	Firefox	Chrome	Safari	Opera	iOS Safari	Browser Android	Chrome untuk Android
6 - 8 Dukungan sebagian menggunakan sintaks filter Penggunaan browser: 0.03%			4 - 9 Dukungan menggunakan sintaks -webkit- lama Penggunaan browser: 0% Pilih "Maksimalkan kompatibilitas" untuk mendukung	4 - 5 Dukungan menggunakan sintaks -webkit- lama Penggunaan browser: 0.01% Pilih "Maksimalkan kompatibilitas" untuk mendukung		3.2 - 4.3 Dukungan menggunakan sintaks -webkit- lama Penggunaan browser: 0% Pilih "Maksimalkan kompatibilitas" untuk mendukung	2.1 - 3 Dukungan menggunakan sintaks -webkit- lama Penggunaan browser: 0.01% Pilih "Maksimalkan kompatibilitas" untuk mendukung
9 Dukungan sebagian menggunakan sintaks filter Dukungan penuh menggunakan SVG (pilih "IE9 support") Penggunaan browser: 0.05% Pilih "Maksimalkan kompatibilitas" untuk mendukung		3.6 - 15 Dukungan menggunakan prefiks -moz- Penggunaan browser: 0.01% Pilih "Maksimalkan kompatibilitas" untuk mendukung	10 - 25 Dukungan menggunakan prefiks -webkit- Penggunaan browser: 0% Pilih "Maksimalkan kompatibilitas" untuk mendukung	5.1 - 6 Dukungan menggunakan prefiks -webkit- Penggunaan browser: 0.01% Pilih "Maksimalkan kompatibilitas" untuk mendukung	11.1 - 11.5 Dukungan menggunakan prefiks -o- Penggunaan browser: 0% Pilih "Maksimalkan kompatibilitas" untuk mendukung	5.1 - 6.1 Dukungan menggunakan prefiks -webkit- Penggunaan browser: 0% Pilih "Maksimalkan kompatibilitas" untuk mendukung	4 - 4.3 Dukungan menggunakan prefiks -webkit- Penggunaan browser: 0.09% Pilih "Maksimalkan kompatibilitas" untuk mendukung
10+ Dukungan penuh (tanpa prefiks)	12+ Dukungan penuh (tanpa prefiks)	16+ Dukungan penuh (tanpa prefiks)	26+ Dukungan penuh (tanpa prefiks)	6.1+ Dukungan penuh (tanpa prefiks)	12+ Dukungan penuh (tanpa prefiks)	7.1+ Dukungan penuh (tanpa prefiks)	4.4+ Dukungan penuh (tanpa prefiks)	46+ Dukungan penuh (tanpa prefiks)

dukungan IE9 (?) Maksimalkan kompatibilitas

Tautan ke dokumentasi gradien CSS: W3C, Firefox, Safari, Chrome (Webkit), Internet Explorer, Opera [2].

Apa yang baru

» Jangan menghasilkan sintaks dengan prefiks secara default (hidupkan kembali menggunakan mode 'Maksimalkan kompatibilitas')

tampilkan lebih banyak... tampilkan lebih sedikit...

Versi sebelumnya (English)

» Don't generate older Opera, IE10 Preview, Webkit syntax by default (turn back on using "Maximize compatibility" mode)
» Browser Compatibility panel showing supported browser versions, usage stats etc.
» Support for radial and diagonal linear gradients
» Support for full multi-stop gradients in Internet Explorer 9 (IE9) using SVG
» Support for Sass SCSS format using Compass mixins (needs latest beta of Compass)
» Copy to clipboard button for quickly grabbing the generated code
» Easy resizing of preview panel by dragging its corner
» Opacity support
- · Create transparent css gradients, or add fade-in, fade-out, semi-transparency and similar effects
- · Add any number of opacity stops to your gradient
- · Supports opacity stops at any position - completely independent of color stops
- · Automatically switch to rgba/hsla color output mode when transparency is used
- · Outputs older Internet Explorer opacity format (yes, this will even work with IE6!)
- · Opacity support when importing from CSS
- · Supports importing gradients with transparency from an image
» Double click on CSS text output to select all of it for easy copying
» More robust new algorithm for converting gradient images to CSS, including alpha support

» New 'Adjustments' panel - tweak your gradient or create new flavors
- · Adjust hue, saturation and lightness
- · Reverse current gradient
» Added hsl and hsla color format support in CSS output
» Added a unique permalink to each gradient for linking to, saving or sharing specific gradients.
» Added the ability to toggle CSS comments on/off.

» Added support for 4 new gradient formats:
- · IE 10+
- · Newer Webkit
- · Opera 11.10+
- · W3C

» Import from an image - convert an existing gradient image to CSS
- · Supports complex multi-stop gradients
- · Upload an image or import from an image URL

» Import from CSS - enter existing gradient CSS in various formats and import it into the tool
» Save your gradients as new presets
- · Edit your gradient, enter its name and hit 'new'
- · Remove any of your preset gradients using its context menu (right click)
- · Your gradient presets will be persisted in the tool across sessions
» Added rgb and rgba color format support in CSS output
» Persist settings across sessions - gradient orientation, preview panel dimensions, output color format etc.
» Keyboard shortcuts - press up/down in color stop entry box to increase/decrease value

Tentang

Ultimate CSS Gradient Editor dibuat oleh Alex Sirota. Jika Anda menyukai alat ini, cek ColorZilla untuk alat yang lebih canggih seperti eyedroppers, color pickers, editor palet, dan analisator situs web.

Seperti yang mungkin Anda ketahui, HTML5 memperkenalkan banyak fitur menarik untuk pengembang Web. Salah satu fiturnya adalah kemampuan untuk menentukan gradien menggunakan CSS3 murni, tanpa harus membuat gambar apa pun dan menggunakannya sebagai latar belakang yang berulang untuk efek gradien.

Penting: Anda akan memerlukan versi terbaru dari Firefox, Chrome, Safari, Opera atau IE untuk menggunakan Generator Gradien ini. Gradien CSS yang dihasilkan adalah lintas browser - mereka akan bekerja di browser ini dan juga akan kembali ke gradien yang lebih sederhana di versi Internet Explorer yang lebih lama.

Fitur

Antarmuka seperti Photoshop yang kuat
Output CSS lintas browser
Gradien horizontal, vertikal, diagonal dan radial
Gradien multi-stop yang kompleks
Dukungan opasitas dengan beberapa stop opasitas
Format warna Hex, rgb, rgba, hsl, hsla
Dukungan untuk gradien multi-stop penuh dengan IE9
Impor dari gambar (ubah gradien gambar menjadi CSS)
Impor dari CSS yang ada
Sesuaikan gradien berdasarkan hue, saturasi, kecerahan
Lebih dari 135 preset gradien
Menyimpan preset gradien kustom
Output Sass
Panel pratinjau yang fleksibel
Permalink gradien untuk mengirim dan berbagi
Lebih banyak segera hadir!

Help

Kontrol gradien utama memungkinkan Anda untuk:

» Sesuaikan posisi stop gradien dengan menyeret penanda stop
» Sesuaikan warna stop dengan mengklik dua kali pada penanda stop
» Hapus stop dengan menyeret penanda stop ke atas atau ke bawah
» Tambahkan stop baru dengan mengklik di mana saja di antara penanda stop yang ada

Anda dapat menggunakan panel 'Stops' untuk mengontrol warna dan posisi stop yang saat ini dipilih dengan lebih tepat.

Panel 'Preview' memungkinkan Anda untuk melihat pratinjau gradien saat ini dalam bentuk vertikal atau horizontal, dan juga memungkinkan Anda untuk melihat pratinjau cepat tentang bagaimana gradien fallback Internet Explorer akan terlihat di IE.

Terakhir, panel 'CSS' selalu menyediakan CSS untuk gradien saat ini yang bisa dengan mudah disalin dan ditempel ke stylesheet Anda. Anda juga bisa menggunakan panel ini untuk mengimpor CSS gradien yang sudah ada ke dalam alat ini.