Générateur de Dégradé CSS Ultime

Préréglages

Nom:

teinte/saturation inverser importer css importer image

Arrêts

Opacité:		Emplacement:	%
Couleur:		Emplacement:	%

Sponsorisé

Aperçu

Orientation: Taille: x IE

CSS

basculer vers sass

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

copier

Format de couleur: Commentaires

Liez, enregistrez ou partagez le dégradé actuel en utilisant son permalink.

Compatibilité navigateur

IE	Edge	Firefox	Chrome	Safari	Opera	iOS Safari	Navigateur Android	Chrome pour Android
6 - 8 Support partiel en utilisant la syntaxe filter Utilisation du navigateur: 0.03%			4 - 9 Support en utilisant l'ancienne syntaxe -webkit- Utilisation du navigateur: 0% Sélectionnez "Maximiser la compatibilité" pour assurer la compatibilité	4 - 5 Support en utilisant l'ancienne syntaxe -webkit- Utilisation du navigateur: 0.01% Sélectionnez "Maximiser la compatibilité" pour assurer la compatibilité		3.2 - 4.3 Support en utilisant l'ancienne syntaxe -webkit- Utilisation du navigateur: 0% Sélectionnez "Maximiser la compatibilité" pour assurer la compatibilité	2.1 - 3 Support en utilisant l'ancienne syntaxe -webkit- Utilisation du navigateur: 0.01% Sélectionnez "Maximiser la compatibilité" pour assurer la compatibilité
9 Support partiel en utilisant la syntaxe filter Support complet en utilisant SVG (sélectionnez "IE9 support") Utilisation du navigateur: 0.05% Sélectionnez "Maximiser la compatibilité" pour assurer la compatibilité		3.6 - 15 Support en utilisant le préfixe -moz- Utilisation du navigateur: 0.01% Sélectionnez "Maximiser la compatibilité" pour assurer la compatibilité	10 - 25 Support en utilisant le préfixe -webkit- Utilisation du navigateur: 0% Sélectionnez "Maximiser la compatibilité" pour assurer la compatibilité	5.1 - 6 Support en utilisant le préfixe -webkit- Utilisation du navigateur: 0.01% Sélectionnez "Maximiser la compatibilité" pour assurer la compatibilité	11.1 - 11.5 Support en utilisant le préfixe -o- Utilisation du navigateur: 0% Sélectionnez "Maximiser la compatibilité" pour assurer la compatibilité	5.1 - 6.1 Support en utilisant le préfixe -webkit- Utilisation du navigateur: 0% Sélectionnez "Maximiser la compatibilité" pour assurer la compatibilité	4 - 4.3 Support en utilisant le préfixe -webkit- Utilisation du navigateur: 0.09% Sélectionnez "Maximiser la compatibilité" pour assurer la compatibilité
10+ Support complet (sans préfixe)	12+ Support complet (sans préfixe)	16+ Support complet (sans préfixe)	26+ Support complet (sans préfixe)	6.1+ Support complet (sans préfixe)	12+ Support complet (sans préfixe)	7.1+ Support complet (sans préfixe)	4.4+ Support complet (sans préfixe)	46+ Support complet (sans préfixe)

support IE9 (?) Maximiser la compatibilité

Liens vers la documentation sur les dégradés CSS: W3C, Firefox, Safari, Chrome (Webkit), Internet Explorer, Opera [2].

Quoi de neuf

» Ne pas générer de syntaxes préfixées par défaut (réactivez en utilisant le mode 'Maximiser la compatibilité')

voir plus... voir moins...

Versions précédentes (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

À propos

L'éditeur de gradient CSS ultime a été créé par Alex Sirota. Si vous aimez cet outil, découvrez ColorZilla pour des outils plus avancés tels que les pipettes, les sélecteurs de couleur, les éditeurs de palette et les analyseurs de sites Web.

Comme vous le savez peut-être, HTML5 a introduit de nombreuses fonctionnalités passionnantes pour les développeurs Web. L'une des fonctionnalités est la possibilité de spécifier des gradients en utilisant uniquement CSS3, sans avoir à créer d'images et à les utiliser comme arrière-plans répétés pour les effets de gradient.

Important: Vous aurez besoin d'une version récente de Firefox, Chrome, Safari, Opera ou IE pour utiliser ce générateur de gradient. Les gradients CSS résultants sont inter-navigateurs - ils fonctionneront dans ces navigateurs et retomberont également sur un gradient plus simple dans les anciennes versions d'Internet Explorer.

Fonctionnalités

Interface puissante à la manière de Photoshop
Sortie CSS multi-navigateurs
Gradients horizontaux, verticaux, diagonaux et radiaux
Gradients multi-arrêts complexes
Prise en charge de l'opacité avec plusieurs points d'opacité
Formats de couleur Hex, rgb, rgba, hsl, hsla
Prise en charge des gradients multi-arrêts complets avec IE9
Importer à partir de l'image (convertir le gradient d'image en CSS)
Importer à partir du CSS existant
Ajustez le gradient par teinte, saturation, luminosité
Plus de 135 préréglages de gradient
Enregistrement de préréglages de gradient personnalisés
Sortie Sass
Panneau d'aperçu flexible
Permalien du gradient pour l'envoi et le partage
Plus à venir!

Aide

Le contrôle du gradient principal vous permet de:

» Ajustez la position d'arrêt du gradient en faisant glisser le marqueur d'arrêt
» Ajustez la couleur d'arrêt en double-cliquant sur le marqueur d'arrêt
» Supprimer un arrêt en faisant glisser le marqueur d'arrêt vers le haut ou vers le bas
» Ajouter un nouvel arrêt en cliquant n'importe où entre les marqueurs d'arrêt existants

Vous pouvez utiliser le panneau 'Arrêts' pour contrôler la couleur et la position de l'arrêt actuellement sélectionné plus précisément.

Le panneau 'Aperçu' vous permet de prévisualiser le gradient actuel en vertical ou horizontal, et permet également de prévisualiser rapidement à quoi ressemblera le gradient de secours d'Internet Explorer dans IE.

Enfin, le panneau 'CSS' contient toujours le CSS pour le gradient actuel pour une copie et un collage faciles dans votre feuille de style. Vous pouvez également utiliser ce panneau pour importer un gradient CSS existant dans l'outil.

Générateur de dégradé CSS ultime

Entrez le CSS de dégradé existant à importer