Ultieme CSS Gradient Generator

Voorinstellingen

Naam:

tint/verzadiging omkeren css importeren afbeelding importeren

Stops

Transparantie:		Locatie:	%
Kleur:		Locatie:	%

Sponsor

Voorbeeld

Oriëntatie: Grootte: x IE

CSS

schakel over naar sass

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

kopiëren

Kleurformaat: Opmerkingen

Link naar, sla op of deel de huidige gradient met behulp van zijn permalink.

Browsercompatibiliteit

IE	Edge	Firefox	Chrome	Safari	Opera	iOS Safari	Android Browser	Chrome voor Android
6 - 8 Gedeeltelijke ondersteuning met behulp van filter syntax Browser gebruik: 0.03%			4 - 9 Ondersteuning met behulp van oude -webkit- syntax Browser gebruik: 0% Selecteer "Maximaliseer compatibiliteit" voor ondersteuning	4 - 5 Ondersteuning met behulp van oude -webkit- syntax Browser gebruik: 0.01% Selecteer "Maximaliseer compatibiliteit" voor ondersteuning		3.2 - 4.3 Ondersteuning met behulp van oude -webkit- syntax Browser gebruik: 0% Selecteer "Maximaliseer compatibiliteit" voor ondersteuning	2.1 - 3 Ondersteuning met behulp van oude -webkit- syntax Browser gebruik: 0.01% Selecteer "Maximaliseer compatibiliteit" voor ondersteuning
9 Gedeeltelijke ondersteuning met behulp van filter syntax Volledige ondersteuning met behulp van SVG (selecteer "IE9 ondersteuning") Browser gebruik: 0.05% Selecteer "Maximaliseer compatibiliteit" voor ondersteuning		3.6 - 15 Ondersteuning met behulp van -moz- prefix Browser gebruik: 0.01% Selecteer "Maximaliseer compatibiliteit" voor ondersteuning	10 - 25 Ondersteuning met behulp van -webkit- prefix Browser gebruik: 0% Selecteer "Maximaliseer compatibiliteit" voor ondersteuning	5.1 - 6 Ondersteuning met behulp van -webkit- prefix Browser gebruik: 0.01% Selecteer "Maximaliseer compatibiliteit" voor ondersteuning	11.1 - 11.5 Ondersteuning met behulp van -o- prefix Browser gebruik: 0% Selecteer "Maximaliseer compatibiliteit" voor ondersteuning	5.1 - 6.1 Ondersteuning met behulp van -webkit- prefix Browser gebruik: 0% Selecteer "Maximaliseer compatibiliteit" voor ondersteuning	4 - 4.3 Ondersteuning met behulp van -webkit- prefix Browser gebruik: 0.09% Selecteer "Maximaliseer compatibiliteit" voor ondersteuning
10+ Volledige ondersteuning (zonder prefix)	12+ Volledige ondersteuning (zonder prefix)	16+ Volledige ondersteuning (zonder prefix)	26+ Volledige ondersteuning (zonder prefix)	6.1+ Volledige ondersteuning (zonder prefix)	12+ Volledige ondersteuning (zonder prefix)	7.1+ Volledige ondersteuning (zonder prefix)	4.4+ Volledige ondersteuning (zonder prefix)	46+ Volledige ondersteuning (zonder prefix)

IE9 ondersteuning (?) Compatibiliteit maximaliseren

Links naar CSS gradients documentatie: W3C, Firefox, Safari, Chrome (Webkit), Internet Explorer, Opera [2].

Wat is er nieuw

» Genereer standaard geen geprefixede syntaxen (zet weer aan met behulp van 'Maximaliseer compatibiliteit' modus)

toon meer... toon minder...

Vorige versies (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

Over

De Ultimate CSS Gradient Editor is gemaakt door Alex Sirota. Als je deze tool leuk vindt, bekijk dan ColorZilla voor meer geavanceerde tools zoals pipetten, kleurenkiezers, paleteditors en website-analysers.

Zoals je misschien weet, heeft HTML5 veel spannende functies geïntroduceerd voor webontwikkelaars. Een van de functies is de mogelijkheid om verlopen te specificeren met pure CSS3, zonder afbeeldingen te hoeven maken en ze te gebruiken als herhalende achtergronden voor verloopeffecten.

Belangrijk: Je hebt een recente versie van Firefox, Chrome, Safari, Opera of IE nodig om deze Gradient Generator te gebruiken. De resulterende CSS-verlopen zijn cross-browser - ze werken in deze browsers en vallen ook terug op een eenvoudiger verloop in oudere versies van Internet Explorer.

Functies

Krachtige Photoshop-achtige interface
Cross-browser CSS-output
Horizontale, verticale, diagonale en radiale verlopen
Complexe multi-stop verlopen
Ondersteuning voor dekking met meerdere dekkingsstops
Hex, rgb, rgba, hsl, hsla kleurformaten
Ondersteuning voor volledige multi-stop verlopen met IE9
Importeren van afbeelding (converteer afbeeldingsverloop naar CSS)
Importeren van bestaande CSS
Pas het verloop aan op tint, verzadiging, lichtheid
Meer dan 135 verloopvoorinstellingen
Aangepaste verloopvoorinstellingen opslaan
Sass output
Flexibel voorbeeldpaneel
Verloop permalinks voor verzenden en delen
Binnenkort meer!

Help

De belangrijkste verloopregelaar stelt je in staat om:

» Pas de positie van de verloopstop aan door de stopmarker te slepen
» Pas de stopkleur aan door dubbel te klikken op de stopmarker
» Verwijder een stop door de stopmarker omhoog of omlaag te slepen
» Voeg een nieuwe stop toe door ergens tussen de bestaande stopmarkers te klikken

Je kunt het 'Stops' paneel gebruiken om de kleur en de positie van de momenteel geselecteerde stop nauwkeuriger te regelen.

Het 'Preview' paneel maakt het mogelijk om het huidige verloop als een verticaal of horizontaal verloop te bekijken, en stelt je ook in staat om snel te bekijken hoe het fallback verloop voor Internet Explorer eruit zal zien in IE.

Tot slot heeft het 'CSS' paneel altijd de CSS voor het huidige verloop voor eenvoudig kopiëren en plakken in je stylesheet. Je kunt dit paneel ook gebruiken om bestaande verloop CSS in de tool te importeren.

Ultieme CSS Verloopgenerator

Voer bestaande gradient CSS in om te importeren