Gradients

Gradients

Another hard-to-write CSS3 feature is a gradient. You have to repeat long gradient definition multiple times with different vendor prefixes. Also, if you want to cover all gradient-supported browsers, you have to use three different notations: old Webkit, currently supported (linear-gradient(top, ...)) and W3C-proposed (linear-gradient(to bottom, ...)).

Usually, users prefere to use third-party GUIs to generate gradients definitions, but you can do the very same thing much faster right in your editor.

Emmet has a CSS3 Gradient Generator that can do all the hard work for you:

As you can see from the example above, you can type regular gradient definition as lg(...) (or linear-gradient(...)) function and expand it as an abbreviation. If you write the gradient definition as a property value, Emmet will parse it and use its name as a reference for new CSS properties.

Fallback value

In preferences, you can enable css.gradient.fallback option to produce a fallback background-color CSS property whenever a gradient definition for background-* CSS property is expanded. This fallback property will contain a first color from gradient definition.

This option is off by default because it produces a background-color value that almost certainly needs to be manually updated to make sure that content is readable on this background. If you don’t really care about old browsers, you can enable this option.