Ultimate CSS Gradient Generator

Voreinstellungen

Name:

Farbton/Sättigung umkehren CSS-Import Bild-Import

Stopps

Deckkraft:		Standort:	%
Farbe:		Standort:	%

Sponsor

Vorschau

Orientierung: Größe: x IE

CSS

Wechseln zu sass

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

kopieren

Farbformat: Kommentare

Verlinken, speichern oder teilen des aktuellen Verlaufs mit seinem Permalink.

Browserkompatibilität

IE	Edge	Firefox	Chrome	Safari	Opera	iOS Safari	Android Browser	Chrome für Android
6 - 8 Teilweise Unterstützung mit filter Syntax Browser-Nutzung: 0.03%			4 - 9 Unterstützung mit alter -webkit- Syntax Browser-Nutzung: 0% "Maximale Kompatibilität" auswählen, um zu unterstützen	4 - 5 Unterstützung mit alter -webkit- Syntax Browser-Nutzung: 0.01% "Maximale Kompatibilität" auswählen, um zu unterstützen		3.2 - 4.3 Unterstützung mit alter -webkit- Syntax Browser-Nutzung: 0% "Maximale Kompatibilität" auswählen, um zu unterstützen	2.1 - 3 Unterstützung mit alter -webkit- Syntax Browser-Nutzung: 0.01% "Maximale Kompatibilität" auswählen, um zu unterstützen
9 Teilweise Unterstützung mit filter Syntax Volle Unterstützung mit SVG (wähle "IE9 Unterstützung") Browser-Nutzung: 0.05% "Maximale Kompatibilität" auswählen, um zu unterstützen		3.6 - 15 Unterstützung mit -moz- Prefix Browser-Nutzung: 0.01% "Maximale Kompatibilität" auswählen, um zu unterstützen	10 - 25 Unterstützung mit -webkit- Prefix Browser-Nutzung: 0% "Maximale Kompatibilität" auswählen, um zu unterstützen	5.1 - 6 Unterstützung mit -webkit- Prefix Browser-Nutzung: 0.01% "Maximale Kompatibilität" auswählen, um zu unterstützen	11.1 - 11.5 Unterstützung mit -o- Prefix Browser-Nutzung: 0% "Maximale Kompatibilität" auswählen, um zu unterstützen	5.1 - 6.1 Unterstützung mit -webkit- Prefix Browser-Nutzung: 0% "Maximale Kompatibilität" auswählen, um zu unterstützen	4 - 4.3 Unterstützung mit -webkit- Prefix Browser-Nutzung: 0.09% "Maximale Kompatibilität" auswählen, um zu unterstützen
10+ Volle Unterstützung (ohne Prefix)	12+ Volle Unterstützung (ohne Prefix)	16+ Volle Unterstützung (ohne Prefix)	26+ Volle Unterstützung (ohne Prefix)	6.1+ Volle Unterstützung (ohne Prefix)	12+ Volle Unterstützung (ohne Prefix)	7.1+ Volle Unterstützung (ohne Prefix)	4.4+ Volle Unterstützung (ohne Prefix)	46+ Volle Unterstützung (ohne Prefix)

IE9 Unterstützung (?) Maximale Kompatibilität

Links zur CSS-Verlaufsdokumentation: W3C, Firefox, Safari, Chrome (Webkit), Internet Explorer, Opera [2].

Was ist neu

» Standardmäßig keine Syntaxen mit Prefix generieren (wieder aktivieren mit 'Maximale Kompatibilität'-Modus)

mehr anzeigen... weniger anzeigen...

Vorherige Versionen (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

Über

Der Ultimate CSS Gradient Editor wurde von Alex Sirota erstellt. Wenn Sie dieses Tool mögen, schauen Sie sich ColorZilla für fortschrittlichere Werkzeuge wie Pipetten, Farbauswähler, Paletteneditoren und Website-Analysatoren an.

Wie Sie vielleicht wissen, hat HTML5 viele spannende Features für Webentwickler eingeführt. Eines dieser Features ist die Möglichkeit, Verläufe mit reinem CSS3 zu definieren, ohne Bilder erstellen und sie als wiederholende Hintergründe für Verlaufseffekte verwenden zu müssen.

Wichtig: Sie benötigen eine aktuelle Version von Firefox, Chrome, Safari, Opera oder IE, um diesen Gradient-Generator zu verwenden. Die resultierenden CSS-Verläufe sind browserübergreifend - sie funktionieren in diesen Browsern und weichen in älteren Versionen des Internet Explorers auf einen einfacheren Verlauf aus.

Funktionen

Starkes Photoshop-ähnliches Interface
Browserübergreifende CSS-Ausgabe
Horizontale, vertikale, diagonale und radiale Verläufe
Komplexe Multi-Stop-Verläufe
Deckkraftunterstützung mit mehreren Deckkraftstops
Hex, rgb, rgba, hsl, hsla Farbformate
Unterstützung für volle Multi-Stop-Verläufe mit IE9
Importieren von Bildern (Bildverlauf in CSS konvertieren)
Import aus vorhandenem CSS
Verlauf anpassen nach Farbton, Sättigung, Helligkeit
Mehr als 135 Verlaufsvorlagen
Speichern von benutzerdefinierten Verlaufsvorlagen
Sass-Ausgabe
Flexibles Vorschaufenster
Verlaufs-Permalinks zum Senden und Teilen
Bald mehr!

Hilfe

Die Hauptverlaufskontrolle ermöglicht Ihnen:

» Anpassen der Verlaufsstop-Position durch Ziehen des Stop-Markers
» Anpassen der Stop-Farbe durch Doppelklicken auf den Stop-Marker
» Löschen eines Stops durch Hoch- oder Herunterziehen des Stop-Markers
» Hinzufügen eines neuen Stops durch Klicken zwischen den vorhandenen Stop-Markern

Mit dem 'Stops'-Panel können Sie die Farbe und Position des aktuell ausgewählten Stops genauer steuern.

Das 'Vorschau'-Panel ermöglicht die Vorschau des aktuellen Verlaufs als vertikalen oder horizontalen Verlauf und zeigt schnell, wie der Fallback-Verlauf in IE aussehen wird.

Schließlich hat das 'CSS'-Panel immer das CSS für den aktuellen Verlauf zum einfachen Kopieren und Einfügen in Ihr Stylesheet. Sie können dieses Panel auch verwenden, um ein vorhandenes Gradienten-CSS in das Tool zu importieren.