Generatore di gradienti CSS definitivo

Preimpostazioni

Nome:

tonalità/saturazione inverso importa css importa immagine

Punti

Opacità:		Posizione:	%
Colore:		Posizione:	%

Sponsor

Anteprima

Orientamento: Dimensione: x IE

CSS

passa a sass

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

copia

Formato colore: Commenti

Collega, salva o condividi il gradiente corrente utilizzando il suo permalink.

Compatibilità del browser

IE	Edge	Firefox	Chrome	Safari	Opera	iOS Safari	Browser Android	Chrome per Android
6 - 8 Supporto parziale utilizzando la sintassi filter Utilizzo del browser: 0.03%			4 - 9 Supporto utilizzando la vecchia sintassi -webkit- Utilizzo del browser: 0% Seleziona "Massimizza compatibilità" per supportare	4 - 5 Supporto utilizzando la vecchia sintassi -webkit- Utilizzo del browser: 0.01% Seleziona "Massimizza compatibilità" per supportare		3.2 - 4.3 Supporto utilizzando la vecchia sintassi -webkit- Utilizzo del browser: 0% Seleziona "Massimizza compatibilità" per supportare	2.1 - 3 Supporto utilizzando la vecchia sintassi -webkit- Utilizzo del browser: 0.01% Seleziona "Massimizza compatibilità" per supportare
9 Supporto parziale utilizzando la sintassi filter Supporto completo utilizzando SVG (seleziona "supporto IE9") Utilizzo del browser: 0.05% Seleziona "Massimizza compatibilità" per supportare		3.6 - 15 Supporto utilizzando il prefisso -moz- Utilizzo del browser: 0.01% Seleziona "Massimizza compatibilità" per supportare	10 - 25 Supporto utilizzando il prefisso -webkit- Utilizzo del browser: 0% Seleziona "Massimizza compatibilità" per supportare	5.1 - 6 Supporto utilizzando il prefisso -webkit- Utilizzo del browser: 0.01% Seleziona "Massimizza compatibilità" per supportare	11.1 - 11.5 Supporto utilizzando il prefisso -o- Utilizzo del browser: 0% Seleziona "Massimizza compatibilità" per supportare	5.1 - 6.1 Supporto utilizzando il prefisso -webkit- Utilizzo del browser: 0% Seleziona "Massimizza compatibilità" per supportare	4 - 4.3 Supporto utilizzando il prefisso -webkit- Utilizzo del browser: 0.09% Seleziona "Massimizza compatibilità" per supportare
10+ Supporto completo (senza prefisso)	12+ Supporto completo (senza prefisso)	16+ Supporto completo (senza prefisso)	26+ Supporto completo (senza prefisso)	6.1+ Supporto completo (senza prefisso)	12+ Supporto completo (senza prefisso)	7.1+ Supporto completo (senza prefisso)	4.4+ Supporto completo (senza prefisso)	46+ Supporto completo (senza prefisso)

supporto IE9 (?) Massimizza compatibilità

Collegamenti alla documentazione sui gradienti CSS: W3C, Firefox, Safari, Chrome (Webkit), Internet Explorer, Opera [2].

Novità

» Non generare sintassi con prefisso per impostazione predefinita (riattiva utilizzando la modalità 'Massimizza compatibilità')

mostra di più... mostra meno...

Versioni precedenti (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

Informazioni

L'Editor di Gradienti CSS definitivo è stato creato da Alex Sirota. Se ti piace questo strumento, dai un'occhiata a ColorZilla per strumenti più avanzati come preleva colori, selezionatori di colori, editor di palette e analizzatori di siti web.

Come forse sai, HTML5 ha introdotto molte funzionalità interessanti per gli sviluppatori Web. Una delle funzionalità è la capacità di specificare gradienti utilizzando solo CSS3, senza dover creare immagini e usarle come sfondi ripetuti per effetti di gradiente.

Importante: Avrai bisogno di una versione recente di Firefox, Chrome, Safari, Opera o IE per utilizzare questo Generatore di Gradienti. I gradienti CSS risultanti sono cross-browser - funzioneranno in questi browser e avranno anche un fallback a un gradiente più semplice nelle versioni più vecchie di Internet Explorer.

Caratteristiche

Interfaccia potente simile a Photoshop
Output CSS cross-browser
Gradienti orizzontali, verticali, diagonali e radiali
Gradienti complessi multi-stop
Supporto opacità con molteplici punti di opacità
Formati colore Hex, rgb, rgba, hsl, hsla
Supporto completo per gradienti multi-stop con IE9
Importa da immagine (converti il gradiente dell'immagine in CSS)
Importa da CSS esistente
Regola il gradiente per tonalità, saturazione, luminosità
Più di 135 preset di gradienti
Salvataggio di preset di gradienti personalizzati
Output Sass
Pannello di anteprima flessibile
Permalinks di gradienti per inviare e condividere
Altre novità in arrivo!

Aiuto

Il controllo principale del gradiente ti permette di:

» Regolare la posizione del punto del gradiente trascinando il marcatore
» Regolare il colore del punto facendo doppio clic sul marcatore
» Elimina un punto trascinando il marcatore verso l'alto o verso il basso
» Aggiungi un nuovo punto facendo clic ovunque tra i marcatori di punto esistenti

Puoi utilizzare il pannello 'Punti' per controllare il colore e la posizione del punto attualmente selezionato con maggiore precisione.

Il pannello 'Anteprima' permette di visualizzare in anteprima il gradiente corrente come verticale o orizzontale e permette anche di vedere rapidamente come apparirà il gradiente di fallback di Internet Explorer in IE.

Infine, il pannello 'CSS' ha sempre il CSS per il gradiente corrente per una facile copia e incollatura nel tuo foglio di stile. Puoi anche utilizzare questo pannello per importare un gradiente CSS esistente nello strumento.