ewrwerewrwerwerwerwerewrewrwer

Ultimate CSS Gradient Generator

A powerful Photoshop-like CSS gradient editor from ColorZilla.For FirefoxFor ChromeGradient GeneratorPresets Name:      StopsOpacity:Color: Location: Adjustments Sponsor

News: version 4 is here – radial and diagonal gradients, IE9 support, Sass support and more.Preview Orientation:                                                                                       Size:                                                                                          (?) PermalinkLink to, save or share the current gradient using its unique link.Share and Follow

 Tweet    What’s new in version 4» 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 cornershow more…

 About

The Ultimate CSS Gradient Editor was created by Alex Sirota (iosart). If you like this tool, check out ColorZilla for more advanced tools such as eyedroppers, color pickers, palette editors and website analyzers.

As you might know, HTML5 introduced many exciting features for Web developers. One of the features is the ability to specify gradients using pure CSS3, without having to create any images and use them as repeating backgrounds for gradient effects.

Important: You’ll need a recent version of Firefox, Chrome, Safari, Opera or IE to use this Gradient Generator. The resulting CSS gradients are cross-browser – they will work in these browsers and will also fall back to a simpler gradient in older versions of Internet Explorer.

Links to CSS gradients documentation: in Firefox, Safari and Chrome (Webkit) [older], Internet Explorer and Opera [2].FeaturesPowerful Photoshop-like interfaceCross browser CSS outputHorizontal, vertical, diagonal and radial gradientsComplex multi-stop gradientsOpacity support with multiple opacity stopsHex, rgb, rgba, hsl, hsla color formatsSupport for full multi-stop gradients with IE9Import from image (convert image gradient to CSS)Import from existing CSSAdjust gradient by hue, saturation, lightnessMore than 135 gradient presetsSaving custom gradient presetsSass outputFlexible preview panelGradient permalinks for sending and sharingMore soon!Help

The main gradient control allows you to:» Adjust the gradient stop position by dragging the stop marker» Adjust the stop color by double clicking on the stop marker» Delete a stop by draggin the stop marker up or down» Add a new stop by clicking anywhere in between the existing stop markersYou can use the ‘Stops’ panel to conrol the color and the position of the currently selected stop more precisely.

The ‘Preview’ panel allows previewing the current gradient as a vertical or horizontal one, and also allows quickly previewing how the Internet Explorer fallback gradient will look in IE.

Finally, the ‘CSS’ panel always has the CSS for the current gradient for easy copying and pasting into your stylesheet. You can also use this panel to import an existing gradient CSS into the tool.Credits

The ‘Ultimate Web 2.0 Gradients’ preset gradients were derived from work by deziner folio and SGlider12.

The Color Picker is a minor adaptation of John Dyer’s Color Picker.

The Base-64 encoder function is from webtoolkit.Tags: CSS Gradient Editor, CSS Gradient Generator, HTML5 Gradient Generator, CSS3 Gradient Generator, CSS Gradient Maker, CSS Gradient Creator, Linear Gradients, Radial Gradients, IE6, IE7, IE8, IE9, IE10, SVG Gradients, ColorZilla

Copyright © 2015 iosart labs llc, All Rights Reserved

contact | terms of use | privacy policy