CSS Gradient Editor: Generate CSS Code For Gradient Background [Mac]


CSS is all that governs how your web page or app will appear to the end user, but writing the basic sheet can take a while. It’s probably why you will find lots of auto CSS code generators that let you add effects, create objects or simple gradients. CSS Gradient Editor is a free Mac app that lets you create gradient backgrounds. The app provides you a simple GUI, letting you select any color for the gradient, add up to five stops and select where each stop is place. The gradient can be vertical or horizontal, and the app lets you create presets and generates CSS code compatible with Chrome, Firefox, Safari, Internet Explorer 10, Opera, all matching the W3C standard. You can enter colors as RGB, HSL and Hex codes.

The app loads with a simple, two-shade gradient. It has a single window divided into four sections, where the two sections on the right display the code and preview the gradient as you create it. The sections on the left let you add presets and create or edit a gradient.

CSS Gradient Editor

You will be working mostly with the lower left section. Depending on which type of gradient you want to create, click either the X Axis (for a vertical gradient) or Y Axis (for a horizontal gradient) button. Click the color box for Top Color, and pick which color will appear at the top or the left most side of the gradient. To add an additional stop, check the Stop box just below Top Color, pick a point where the second color will start by moving the slider infront of it. Follow suit to add additional stops. Then, select the Bottom color. The effects will be previewed, and code will be updated as you make the changes.

CSS Gradient Editor add stops

If you want to save a gradient you’ve created, click the Save Preset button and the gradient will be saved. The code can be copied and used in your CSS sheet with no modifications required.

Get CSS Gradient Editor From Mac App Store