Gradients

Flux 4 introduces much more comprehensive support for CSS gradients. In addition to editing gradients, and saving them for later use, you can also export rasterized versions for use in browsers that do not support CSS gradients.

Applying a Gradient to an Element or CSS Style

Select the element or style you want to apply a gradient to and press the 'Gradient Editor' button which is in the 'background-image' property in the 'Fill' section of the Inspector.

You must have at least two colour 'stops' in you gradient, which are created by simply double clicking the position you want the stop to be. Stops can be dragged to other locations by simply moving them by dragging them with your mouse or trackpad.

The colour of the stop can be adjusted by double clicking the stop, and using the standard colour picker to choose the new colour.

Saving a gradient

If you have made a complex gradient, that you'll want to use again in Flux, press the Save Gradient to Gallery... button, and enter a name for the gradient. It will then be availble in the 'Gallery' section of the Gradient Editor palette.

Export a gradient as an image

Support for CSS gradients is still not widespread, so rather than use the CSS version, Flux can create a rasterized version as a PNG or JPEG.

Press the Save Gradient as image... button, and save the image where you want it in your project. Make sure the dimensions are correct. When using Linear gradients, you can make the files smaller by making the dimension of the image very thin, and tiling it when you need to use it.