Apply gradients to background

Using the CSS Designer panel, you can apply gradients to the background of your websites. The gradient property is available in the background category.

Click adjacent to the gradient property to open the gradients panel. Using this panel, you can:

• Choose colors from different color models (RGBa, Hexadecimal, or HSLa). Then, save different color combinations as color swatches.
  
  • To reset the new color to the original color, click the original color (K).
  • To change the order of the swatches, drag the swatches to the required position.
  • To delete a color swatch, drag the swatch out of the panel.
    
• Use color stops to create complex gradients. Click anywhere between the default color stops to create a color stop. To delete a color stop, drag the color stop out of the panel.
  
• Specify the angle for linear gradient.
• To repeat the pattern, edit background-repeat property.
• Save custom gradients as swatches.

Let's understand the following code:

• 57deg: Indicates the angle of the linear gradient
• rgba(255, 255, 255, 1.00): Color for the first color stop
• 0%: Indicates color stop

When you use gradients as background, you can configure Dreamweaver to render the gradients appropriately on different web browsers. Dreamweaver adds appropriate vendor prefixes to the code that enables web browsers to display gradients suitably.

Dreamweaver can write the following vendor prefixes along with w3c format:

• Webkit
• Firefox
• Opera

By default, Dreamweaver writes vendor prefixes for Webkit and Dreamweaver Live View. You can choose the other required vendors from the Preferences dialog box (Preferences > CSS Styles).

Any changes to the gradients are reflected in the vendor-specific syntaxes too. If you open an existing file containing vendor-specific syntaxes in Dreamweaver CC, ensure that you choose the required vendor prefixes in Preferences. Because, by default, Dreamweaver updates only Webkit, and Dreamweaver Live View-related code when you use or change gradients. So, the other vendor-specific syntaxes in your code do not get updated.

You can change the order (in which they appear in the code) of the background images and gradients with a single click.

Click the arrow next to the adjacent to the url or the gradient property in CSS Designer.