How to Add Special Color Effects on CSS3 Sites - dummies

How to Add Special Color Effects on CSS3 Sites

By John Paul Mueller

You have access to a number of special effects when creating gradients using Ultimate Gradient Generator for CSS3 sites. The first is to change colors and add color stops. A color stop signifies a change in color. Notice the color bar has four tabs on the bottom. These tabs control the colors used and where each color starts and ends.


To change a color, click inside the Color field. You see a color picker that you can use to select a new color. Set the color you want and click OK to change the color of the selected stop.

To change the stop position, either type a new value in the Location field or slide the stop along the bar. As you change the setting, you see modifications to the output of the gradient.

You can also click Delete to remove a color stop you don’t want. To add a new color stop, hover the mouse near the bottom of the color bar. You see the cursor change to a pointing hand with a plus sign. Click wherever you want to add the new stop along the color bar and then configure the stop as needed.

The second special effect is the use of transparency. Look again and you see two tabs at the top of the bar. These tabs control transparency. When you click one of these tabs, its triangle turns black, just as the color tabs do. However, in this case, the upper settings of the Stops area become active.


The default setting makes the gradient opaque, which means that the user can’t see through it. However, you can adjust the opacity to allow some of the background to show through — or make the gradient transparent so the user can only see the background in a particular area onscreen. As with color stops, you can add or delete transparency stops as needed to produce a particular effect.