VOOZH about

URL: https://www.colorzilla.com/gradient-editor/

⇱ Ultimate CSS Gradient Generator - ColorZilla.com

👁 ColorZilla

Ultimate CSS Gradient Generator

A powerful Photoshop-like CSS gradient editor

Presets
Name:
hue/saturation reverse import css import image

Enter existing gradient CSS to import

Use Mozilla, Webkit, Opera, W3C or IE format

Import from an image-based gradient

Analyzes the image and converts found gradient to CSS
Hue:
Saturation:
Lightness:
Stops
Opacity:
 Location: %
Color:
 Location: %
Sponsor
Preview
Orientation: Size: x IE
CSS
switch to sass
background: linear-gradient(); /* W3C, IE10+, FF16+, Chrome 26+, Opera 12+, Safari 7+ */
✔ copied to clipboard
copy
Color format:
Link to, save or share the current gradient using its .
Tweet
Follow @colorzilla

°
%
%
#:

Browser compatibility

IE Edge Firefox Chrome Safari Opera iOS Safari Android Browser Chrome for Android
6 - 8
Partial support using filter syntax Browser usage: 0.03%
4 - 9
Support using old -webkit- syntax
Browser usage: 0%
Select "Maximize compatibility" to support
4 - 5
Support using old -webkit- syntax
Browser usage: 0.01%
Select "Maximize compatibility" to support
3.2 - 4.3
Support using old -webkit- syntax
Browser usage: 0%
Select "Maximize compatibility" to support
2.1 - 3
Support using old -webkit- syntax
Browser usage: 0.01%
Select "Maximize compatibility" to support
9
Partial support using filter syntax
Full support using SVG (select "IE9 support")
Browser usage: 0.05%
Select "Maximize compatibility" to support
3.6 - 15
Support using -moz- prefix
Browser usage: 0.01%
Select "Maximize compatibility" to support
10 - 25
Support using -webkit- prefix
Browser usage: 0%
Select "Maximize compatibility" to support
5.1 - 6
Support using -webkit- prefix
Browser usage: 0.01%
Select "Maximize compatibility" to support
11.1 - 11.5
Support using -o- prefix
Browser usage: 0%
Select "Maximize compatibility" to support
5.1 - 6.1
Support using -webkit- prefix
Browser usage: 0%
Select "Maximize compatibility" to support
4 - 4.3
Support using -webkit- prefix
Browser usage: 0.09%
Select "Maximize compatibility" to support
10+
Full support (unprefixed)
 12+
Full support (unprefixed)
 16+
Full support (unprefixed)
 26+
Full support (unprefixed)
 6.1+
Full support (unprefixed)
 12+
Full support (unprefixed)
 7.1+
Full support (unprefixed)
 4.4+
Full support (unprefixed)
 46+
Full support (unprefixed)

(?)

Support for full multi-stop gradients with IE9 (using SVG). Add a "gradient" class to all your elements that have a gradient, and add the following override to your HTML to complete the IE9 support:

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

What's new

show more... show less...

Previous versions

  • » 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

About

The Ultimate CSS Gradient Editor was created by Alex Sirota. 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.

Features

  • Powerful Photoshop-like interface
  • Cross browser CSS output
  • Horizontal, vertical, diagonal and radial gradients
  • Complex multi-stop gradients
  • Opacity support with multiple opacity stops
  • Hex, rgb, rgba, hsl, hsla color formats
  • Support for full multi-stop gradients with IE9
  • Import from image (convert image gradient to CSS)
  • Import from existing CSS
  • Adjust gradient by hue, saturation, lightness
  • More than 135 gradient presets
  • Saving custom gradient presets
  • Sass output
  • Flexible preview panel
  • Gradient permalinks for sending and sharing
  • More soon!

Help

The main gradient control allows you to:

You can use the 'Stops' panel to control 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' gradients presets 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.

Some icons by Yusuke Kamiyamane.

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

Change language:

Copyright © 2024 iosart labs llc, All Rights Reserved

contact | terms of use | privacy policy